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>

Focus

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>

Hover

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>

Focus Visible

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>

Focus Within

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="d-f ai-c w-full max-w-64 bg-white bc-silver-3 br-2 bw-1 fw:os-s fw:ow-2 fw:oo-2 fw:oc-indigo-6 fv:oc-indigo-6">
  <input class="b-0 f-1 h-10 pl-4 bg-transparent c-slate-10 fs-sm" placeholder="Focus me" />
</div>

Checked

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

Checked checkbox

<div class="d-f g-2 ai-c">
  <input type="checkbox" class="w-4 h-4 bc-silver-3 br-1 bw-1 c-p appearance-none" checked readOnly />
  <label class="c-slate-10 fw-600 c:bg-indigo-4fs-sm">Checked checkbox</label>
</div>

Disabled

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>

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