Basics · Styling

State pseudo-classes

Some styles should depend on what the element is doing, not just what it is. State pseudo-classes cover that: :focus matches the element that holds focus, :checked a ticked checkbox or radio, :disabled/:enabled a control by its disabled attribute, and :hover the element under the mouse. Hover only registers on elements that actually define a hover style.

The starting app has two buttons and a checkbox with no state styling, so there’s no way to see which button is focused or whether the box is ticked. Add the pseudo-classes and both become visible.

One rule to know: a state pseudo-class is honoured only on the subject — the rightmost compound of the selector. button:focus works; :focus button (a state on an ancestor) never matches. (:active also parses but never matches — there is no active state on a terminal.)

Your turn

Style the focused button and the checked box:

button:focus {
    border-color: cyan;
    color: yellow;
}
input:checked {
    color: green;
}

Press Run, then Tab between the buttons — the focused one lights up — and toggle the checkbox to see :checked apply.