CSS Pseudo-classes: Style Elements Based on State

Why it exists

HTML describes structure, but UIs need to respond to states that aren't part of that static structure. We need a way to style an element based on whether it's being hovered, has been visited, or is checked, without using JavaScript for every visual change. Pseudo-classes solve this by letting CSS tap into these external states.

The mental model

Think of pseudo-classes as conditional selectors that activate based on an element's state, not its permanent attributes. They answer questions like "Is the user's mouse over this?" (:hover), "Is this checkbox ticked?" (:checked), or "Is this an input the user can't edit?" (:read-only). They style the entire element based on that temporary condition.

How it works

You add a colon (:) and the pseudo-class keyword to a selector. For example, a:visited targets any element that the browser history indicates has been visited. Some pseudo-classes, called functional pseudo-classes, take arguments in parentheses, like :nth-child(2n) to select every even child element in a sequence.

When to use it

Pseudo-classes are essential for styling interactive states and forms. Three common areas are: first, user actions like :hover, :focus, and :active; second, input states like :checked, :disabled, :valid, and :invalid; and third, structural positioning like :first-child and :last-of-type.

When not to use it

Do not use a pseudo-class when you want to style a specific part of an element. For that, use a pseudo-element, which uses a double colon (::). For example, use ::first-letter to style the first character of a paragraph, or ::before to insert content before an element. Confusing :hover (the whole element's state) with ::before (a part of the element) is a common error.

One canonical example

A common use case is giving a user feedback on a form. You can style an input field differently when it's in focus and when its content is valid or invalid according to its HTML attributes (like type="email" or required).

input:focus { border-color: blue; outline: none; } input:invalid { border-color: red; } input:valid { border-color: green; }

This provides immediate visual cues about the input's state without any JavaScript.