Pseudo-classes

A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :hover can be used to change a button's color when the user's pointer hovers over it.

/* Any button over which the user's pointer is hovering */
button:hover {
  color: blue;
}

Pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).

Note: In contrast to pseudo-classes, pseudo-elements can be used to style a specific part of an element.

Syntax

selector:pseudo-class {
  property: value;
}

Like regular classes, you can chain together as many pseudo-classes as you want in a selector.

Index of standard pseudo-classes

Specifications

Specification Status Comment
Fullscreen API Living Standard Defined :fullscreen.
HTML Living Standard Living Standard Defines when particular selectors match HTML elements.
Selectors Level 4 Working Draft Defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where().
Changed :empty to behave like :-moz-only-whitespace .
No significant change for other pseudo-classes defined in Selectors Level 3 and HTML5 (though semantic meaning not taken over).
HTML5 Recommendation Copies the relevant section from the canonical (WHATWG) HTML spec.
CSS Basic User Interface Module Level 3 Recommendation Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
Selectors Level 3 Recommendation Defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
Defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning.
No significant change for pseudo-classes defined in CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) Recommendation Defined :lang(), :first-child, :hover, and :focus.
No significant change for pseudo-classes defined in CSS Level 1.
CSS Level 1 Recommendation Defined :link, :visited and :active, but without the associated semantic meaning.

See also