Pseudo-classes

Active

It represents an element that is activated by the user, typically by pressing the primary mouse button.

<button class="bg-indigo a:bg-indigo-7 px-3 py-2 br-0 c-white">Press me</button>

Focus

It represents an element that has received focus and is triggered when the user clicks or taps on it or uses the Tab key.

<button class="bg-indigo f:oc-indigo-4 f:oo-2 f:os-s f:ow-2 px-3 py-2 br-0 c-white">Click me</button>

Hover

It'll match an element when the user interacts with it using a pointing device. You don't need to press the mouse button to trigger it.

<button class="bg-indigo h:bg-indigo-7 px-3 py-2 br-0 c-white c-p">Hover me</button>

Focus Visible

When an element matches the :focus pseudo-class and the UA (user agent) figures out through heuristics that the focus should be made evident on the element.

<button className="bg-indigo fv:ow-2 fv:oc-indigo-2 px-3 py-2 br-0 c-white c-p">Focus me</button>

Focus Within

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

<div class="fw:bc-indigo bw-2 bc-silver p-px">
  <input class="p-2 bw-1 bc-silver" placeholder="Focus me" />
</div>

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