Pseudo-class

A pseudo-class is a keyword beginning with a single colon that is added to a selector to target an element in a particular state or position, without needing an extra class or script. Examples are :hover, :focus, :checked and :nth-child(2).

Why it matters

Pseudo-classes let CSS react to user interaction and document structure. They style form validity, keyboard focus, visited links and list positions declaratively. They count as one class in specificity. Modern additions such as :is(), :where(), :not() and :has() make selectors shorter and allow parent-based styling.

Do not confuse them with pseudo-elements, which use two colons (::before, ::after) and style a generated part of an element rather than a state.

Example

a:hover, a:focus-visible { text-decoration: underline; }
li:nth-child(odd)        { background: #f5f5f5; }
input:invalid            { border-color: crimson; }
form:has(:invalid) button { opacity: .5; }

The last rule dims a form's button whenever any field inside is invalid.

Common mistakes

• Styling :hover without matching :focus-visible, leaving keyboard users without feedback.
• Relying on :hover for essential actions on touch devices.
• Writing :visited styles expecting to change layout; browsers restrict it for privacy.

Related

• CSS selector
• CSS specificity
• Form validation
• CSS

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.