Pseudo-Classes & Pseudo-Elements

Learn how to use pseudo-class and pseudo-element variants in BismillahCSS to create interactive and dynamic styles.

What are Pseudo-Classes?

Pseudo-classes are selectors that target specific states of an element without adding extra markup. BismillahCSS makes it easy to apply styles for these states using variant prefixes.

💡 Key Concept

Instead of writing `:hover` in CSS, you add a `hover:` prefix to BismillahCSS utilities directly in your HTML.

Common Pseudo-Classes

:hover

Apply styles when the user hovers over an element:

<!-- Change background color on hover -->
<button class="bismillah-bg-blue-500 hover:bismillah-bg-blue-600 bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded">
  Hover me
</button>

<!-- Change multiple properties on hover -->
<a href="#" class="bismillah-text-blue-500 hover:bismillah-text-blue-700 hover:bismillah-underline">
  Hover link
</a>

:focus

Apply styles when an element receives focus:

<!-- Highlight input when focused -->
<input 
  type="text" 
  class="bismillah-border bismillah-border-gray-300 focus:bismillah-border-blue-500 focus:bismillah-ring-2 focus:bismillah-ring-blue-200 bismillah-px-3 bismillah-py-2 bismillah-rounded"
  placeholder="Click me"
/>

<!-- Change button style when focused -->
<button class="bismillah-bg-gray-200 focus:bismillah-outline-none focus:bismillah-ring-2 focus:bismillah-ring-blue-500 bismillah-px-4 bismillah-py-2 bismillah-rounded">
  Focus me
</button>

:active

Apply styles when an element is being activated (clicked):

<button class="bismillah-bg-blue-500 active:bismillah-bg-blue-800 active:bismillah-shadow-inner bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded">
  Press me
</button>

:disabled

Apply styles to disabled form elements:

<button disabled class="bismillah-bg-blue-500 disabled:bismillah-opacity-50 disabled:bismillah-cursor-not-allowed bismillah-text-white bismillah-px-4 bismillah-py-2 bismillah-rounded">
  Disabled button
</button>

<input type="text" disabled class="bismillah-border bismillah-border-gray-300 disabled:bismillah-bg-gray-100 disabled:bismillah-cursor-not-allowed" />

:first-child & :last-child

Apply styles to the first or last child:

<ul>
  <li class="first:bismillah-border-t-0 bismillah-border-t bismillah-border-gray-200 bismillah-p-2">Item 1</li>
  <li class="first:bismillah-border-t-0 bismillah-border-t bismillah-border-gray-200 bismillah-p-2">Item 2</li>
  <li class="first:bismillah-border-t-0 bismillah-border-t bismillah-border-gray-200 bismillah-p-2">Item 3</li>
</ul>

:checked

Apply styles when a checkbox or radio is checked:

<label class="bismillah-flex bismillah-items-center">
  <input 
    type="checkbox" 
    class="bismillah-h-4 bismillah-w-4 checked:bismillah-bg-blue-500"
  />
  <span class="bismillah-ml-2">Remember me</span>
</label>

:not() - Negation

Apply styles to elements that don't match a selector:

<!-- Style all items except the last one with margin -->
<div class="not-last:bismillah-mb-4">Item 1</div>
<div class="not-last:bismillah-mb-4">Item 2</div>
<div>Item 3 (no margin)</div>

Group & Sibling Selectors

group-hover

Change child elements when hovering over a parent container:

<div class="group border rounded p-4 hover:bg-gray-100 cursor-pointer">
  <h3 class="bismillah-font-bold group-hover:bismillah-text-blue-600">
    Card Title
  </h3>
  <p class="bismillah-text-gray-600 group-hover:bismillah-text-gray-900">
    Card description
  </p>
  <button class="group-hover:bismillah-opacity-100 bismillah-opacity-0">
    Show on hover
  </button>
</div>

group-focus

Similar to group-hover but triggers on focus:

<div class="group">
  <input 
    type="text" 
    placeholder="Focus me"
    class="bismillah-border bismillah-px-3 bismillah-py-2"
  />
  <span class="group-focus-within:bismillah-text-blue-500">
    Focused state message
  </span>
</div>

Pseudo-Elements

Pseudo-elements allow you to style specific parts of an element without adding extra HTML:

::before & ::after

Add decorative content before or after elements:

<!-- Add icon before element -->
<div class="before:bismillah-content-['→'] before:bismillah-mr-2">Menu Item</div>

<!-- Add decoration after -->
<span class="after:bismillah-content-['*'] after:bismillah-text-red-500 after:bismillah-ml-1">
  Required field
</span>

::placeholder

Style placeholder text in inputs:

<input 
  type="text" 
  placeholder="Enter your email"
  class="placeholder:bismillah-text-gray-400 placeholder:bismillah-italic"
/>

::selection

Style selected text:

<p class="selection:bismillah-bg-blue-300 selection:bismillah-text-white">
  Select this text to see the custom selection color
</p>

::first-line & ::first-letter

Style the first line or letter of text:

<p class="first-line:bismillah-font-bold first-letter:bismillah-text-2xl">
  This paragraph's first line will be bold and the first letter will be large.
</p>

Practical Examples

Interactive Button

<button class="
  bismillah-bg-blue-600 
  bismillah-text-white 
  bismillah-px-6 
  bismillah-py-2 
  bismillah-rounded-lg 
  bismillah-font-semibold
  hover:bismillah-bg-blue-700
  active:bismillah-bg-blue-800
  active:bismillah-shadow-inner
  focus:bismillah-outline-none 
  focus:bismillah-ring-2 
  focus:bismillah-ring-blue-300
  disabled:bismillah-opacity-50
  disabled:bismillah-cursor-not-allowed
  transition-all
">
  Click me
</button>

Form Input with Focus State

<div>
  <label class="bismillah-block bismillah-mb-2 bismillah-text-sm bismillah-font-medium">
    Email Address
  </label>
  <input 
    type="email"
    class="
      bismillah-w-full
      bismillah-px-4
      bismillah-py-2
      bismillah-border 
      bismillah-border-gray-300
      bismillah-rounded-lg
      focus:bismillah-border-blue-500
      focus:bismillah-ring-2
      focus:bismillah-ring-blue-200
      focus:bismillah-outline-none
      placeholder:bismillah-text-gray-400
      disabled:bismillah-bg-gray-100
      disabled:bismillah-cursor-not-allowed
      transition-colors
    "
    placeholder="Enter your email"
  />
</div>

Hover Card with Group

<div class="group border rounded-lg p-6 hover:bismillah-shadow-lg hover:bismillah-bg-blue-50 cursor-pointer transition-all">
  <h3 class="bismillah-text-xl bismillah-font-bold group-hover:bismillah-text-blue-600 bismillah-mb-2">
    Hover over this card
  </h3>
  <p class="bismillah-text-gray-600 group-hover:bismillah-text-gray-900 bismillah-mb-4">
    The entire card is hoverable and affects all child elements
  </p>
  <button class="
    bismillah-bg-gray-200 
    bismillah-text-gray-800
    group-hover:bismillah-bg-blue-600 
    group-hover:bismillah-text-white
    bismillah-px-4 
    bismillah-py-2 
    bismillah-rounded
    transition-colors
  ">
    Learn More
  </button>
</div>

List with Borders

<ul class="space-y-0">
  <li class="first:bismillah-border-t-0 bismillah-border-t bismillah-border-gray-200 bismillah-px-4 bismillah-py-3 hover:bismillah-bg-gray-50">
    Item 1
  </li>
  <li class="first:bismillah-border-t-0 bismillah-border-t bismillah-border-gray-200 bismillah-px-4 bismillah-py-3 hover:bismillah-bg-gray-50">
    Item 2
  </li>
  <li class="first:bismillah-border-t-0 bismillah-border-t bismillah-border-gray-200 bismillah-px-4 bismillah-py-3 hover:bismillah-bg-gray-50">
    Item 3
  </li>
</ul>

Toggle Switch

<label class="bismillah-flex bismillah-items-center bismillah-cursor-pointer">
  <input 
    type="checkbox"
    class="bismillah-sr-only checked:bismillah-peer"
  />
  <div class="
    bismillah-relative
    bismillah-h-6
    bismillah-w-11
    bismillah-bg-gray-300
    peer-checked:bismillah-bg-blue-600
    bismillah-rounded-full
    transition-colors
  "></div>
  <span class="bismillah-ml-3 bismillah-text-sm">Enable notifications</span>
</label>

Complete Variant Reference

Variant	Description	CSS Pseudo-class
hover:	Mouse hovers over element	:hover
focus:	Element receives focus	:focus
active:	Element is being clicked	:active
disabled:	Form element is disabled	:disabled
first:	First child element	:first-child
last:	Last child element	:last-child
checked:	Checkbox/radio is checked	:checked
group-hover:	Parent is hovered	parent:hover element

Tips & Best Practices

Use transitions: Add `transition-colors` or `transition-all` to smooth pseudo-class changes.
Combine variants: Stack multiple variants like `hover:active:bismillah-bg-color`.
Focus states matter: Always provide clear focus styles for keyboard accessibility.
Test disabled states: Make disabled elements visually distinct and non-interactive.
Use group wisely: The `group` class helps manage related element interactions.