Pseudo Classes

Reference for interactive state & structural pseudo-classes.

Active

Represents an element activated by the user (e.g., clicking a button).

Try clicking and holding the button to see the active state.

<button className="… a:bg-indigo-7">
  Press me
</button>

Represents an element that received focus via click, tap, or the Tab key.

Try clicking on the input field to see how the border color and outline change.

<button className="… f:oc-indigo-4 f:oo-2 f:os-s f:ow-2">
  Click me
</button>

Matches an element when the user interacts with it using a pointing device.

Try hovering over the button to see how the background color changes.

<button className="… h:bg-indigo-7">
  Hover me
</button>

Triggers when an element matches :focus & the browser determines focus should be evident.

Try using Tab to focus the button with your keyboard.

<button className="… fv:ow-2 fv:oc-indigo-2">
  Focus me
</button>

Matches an element if the element or any of its descendants are focused.

Try clicking on the input field to see the container's border change.

<div className="… fw:oc-indigo-6">
  <input placeholder="Focus me" />
</div>

Represents radio, checkbox, or option elements toggled to an "on" state.

Checked checkbox

<input type="checkbox" checked />
<label className="… c:bg-indigo-4">
  Checked checkbox
</label>

Represents disabled elements that cannot be activated or receive focus.

Elements with the disabled attribute use cursor: not-allowed by default in Normalize.

<button className="… d:bg-silver-4 d:c-silver-9" disabled>
  Disabled
</button>

Here's a reference for all the pseudo-variants available in Yumma CSS.

Pseudo-class	Prefix	Description
`:active`	`a:*`	Applied when the element is being pressed
`:checked`	`c:*`	Applied when a radio or checkbox is checked
`:disabled`	`d:*`	Applied when the element is disabled
`:empty`	`e:*`	Applied when the element has no children
`:focus`	`f:*`	Applied when the element receives focus
`:focus-visible`	`fv:*`	Applied when focused via keyboard
`:focus-within`	`fw:*`	Applied when element or child has focus
`:hover`	`h:*`	Applied when the element is hovered
`:first-child`	`fc:*`	Applied when it's the first child
`:invalid`	`i:*`	Applied when the element value is invalid
`:indeterminate`	`in:*`	Applied when state is indeterminate
`:last-child`	`lc:*`	Applied when it's the last child
`:nth-child`	`nc:*`	Applied when matches nth-child(n)
`:required`	`r:*`	Applied when the element is required
`:read-only`	`ro:*`	Applied when the element is read-only
`:valid`	`v:*`	Applied when the element value is valid