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 class="px-3 py-2 bg-indigo a:bg-indigo-7 c-white br-0">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 class="px-3 py-2 bg-indigo c-white br-0 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 class="px-3 py-2 bg-indigo h:bg-indigo-7 c-white br-0 c-p">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="px-3 py-2 bg-indigo c-white br-0 c-p fv:ow-2 fv:oc-indigo-4 fv:oo-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 class="p-px bc-silver bw-2 fw:bc-indigo">
  <input class="p-2 bc-silver bw-1" placeholder="Focus me" />
</div>

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

Checked checkbox

<input type="checkbox" class="w-4 h-4 br-0" checked />

Represents disabled elements that cannot be activated or receive focus.

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

<button class="px-3 py-2 bg-indigo-2 c-white br-0 d:bg-silver-4 d:c-silver-9" disabled>Disabled button</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