Pseudo Classes

Active

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

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

Focus

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

<button className="… 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.

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

Focus visible

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

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

Focus within

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

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

Checked

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

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

Disabled

Represents disabled elements that cannot be activated or receive focus.

<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.