CSS pseudo-class
= CSS pseudo-class
{c}
A <CSS pseudo-class> matches an element using a condition beyond an ordinary type, class or attribute selector. Conditions can concern interaction state, control state or position among siblings. Its syntax uses a colon, as in `:hover`, `:focus` or `:nth-child(2n)`. It refines matching of the element rather than creating another ordinary <DOM node>.<Selectors Level 4 by World Wide Web Consortium>[Pseudo-classes, User Action Pseudo-classes and Tree-Structural pseudo-classes]{ref}
For example, `button:focus` matches a button with focus, while `button:hover` concerns the pointing-device interaction state defined by that pseudo-class. A focused button need not be hovered. A control's `:checked` state can also change through interaction, so matching is not limited to the exact attribute spelling in the original source.
For a structural example, `li:nth-child(2n)` matches list-item elements in even positions among element siblings. Text nodes and comments do not occupy counted positions. However, another kind of element sibling does count, so the expression is not automatically equivalent to selecting every second li while ignoring all other element types.<Selectors Level 4 by World Wide Web Consortium>[The :nth-child() pseudo-class, indexing of element siblings]{ref}
Most <CSS pseudo-classes> contribute to the class component of <CSS specificity>, but functional forms have explicit exceptions. `:where(...)` contributes zero, while `:is(...)` uses the greatest specificity in its argument list. Matching semantics and priority rules must therefore both be checked when a functional pseudo-class changes a rule's behavior.