Pseudoclasses

Pseudoclasses are a feature of CSS that allow styling based on an element’s state or its position in the document tree, rather than on static attributes or content alone. They enable selectors to respond to user interactions, focus states, or structural relationships, without requiring additional markup.

Common categories include user interaction states such as :hover (when a pointer is over an element), :active (while an element is being activated), and :focus (when an element has keyboard focus). Other state-based examples include :focus-visible, :visited and :link for links, and :target for the element whose id matches the URL fragment. Form-related states such as :enabled, :disabled, :checked, :required, :valid, and :invalid are also pseudoclasses, used to reflect validation status or interactivity.

Structural pseudoclasses depend on an element’s position or context within the DOM. Examples include :first-child, :last-child, :nth-child(n), :nth-last-child(n), :nth-of-type(n), :nth-last-of-type(n), :only-child, :only-of-type, and :empty. The :root pseudo-class targets the document root, while :not(selector) allows negation of a given selector.

Syntax and usage are straightforward: a selector followed by a colon and a pseudoclass, e.g., a:hover { color: red; }. Some pseudoclasses take parameters, such as :nth-child(2n+1) or :not(.class). Newer selectors like :has() are introduced in newer specifications but may have limited browser support.

Pseudoclasses differ from pseudoelements, which select parts of elements (for example, ::before and ::after). While pseudoclasses apply to elements as a whole, pseudoelements target internal portions.