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.

Linguistic pseudo-classes

These pseudo-classes reflect the document language, and enable the selection of elements based on language or script direction.

:dir
The directionality pseudo-class selects an element based on its directionality as determined by the document language.
:lang
Select an element based on its content language.

Location pseudo-classes

These pseudo-classes relate to links, and to targeted elements within the current document.

:any-link
Matches an element if the element would match either :link or :visited.
:link
Matches links that have not yet been visited.
:visited
Matches links that have been visited.
:local-link
Matches links whose absolute URL is the same as the target URL, for example anchor links to the same page.
:target
Matches the element which is the target of the document URL.
:target-within
Matches elements which are the target of the document URL, but also elements which have a descendant which is the target of the document URL.
:scope
Represents elements that are a reference point for selectors to match against.

User action pseudo-classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

:hover
Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.
:active
Matches when an item is being activated by the user, for example clicked on.
:focus
Matches when an element has focus.
:focus-visible
Matches when an element has focus and the user agent identifies that the element should be visibly focused. 
:focus-within
Matches an element to which :focus applies, plus any element that has a descendant to which :focus applies.

Time-dimensional pseudo-classes

These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.

:current
Represents the element or ancestor of the element that is being displayed.
:past
Represents an element that occurs entirely before the :current element.
:future
Represents an element that occurs entirely after the :current element.

Resource state pseudo-classes

These pseudo-classes apply to media that is capable of being in a state where it would be described as playing, such as a video.

:playing
Represents a media element that is capable of playing when that element is playing.
:paused
Represents a media element that is capable of playing when that element is paused.

The input pseudo-classes

These pseudo-classes relate to form elements, and enable selecting elements based on HTML attributes and the state that the field is in before and after interaction.

:autofill
Matches when an <input> has been autofilled by the browser.
:enabled
Represents a user interface element that is in an enabled state.
:disabled
Represents a user interface element that is in a disabled state.
:read-only
Represents any element that cannot be changed by the user.
:read-write
Represents any element that is user-editable.
:placeholder-shown
Matches an input element that is displaying placeholder text, for example from the HTML5 placeholder attribute.
:default
Matches one or more UI elements that are the default among a set of elements.
:checked
Matches when elements such as checkboxes and radiobuttons are toggled on.
:indeterminate
Matches when UI elements are in an indeterminate state.
:blank
Matches a user-input element which is empty, containing an empty string or other null input.
:valid
Matches an element with valid contents. For example an input element with type 'email' which contains a validly formed email address.
:invalid
Matches an element with invalid contents. For example an input element with type 'email' with a name entered.
:in-range
Applies to elements with range limitations, for example a slider control, when the selected value is in the allowed range.
:out-of-range
Applies to elements with range limitations, for example a slider control, when the selected value is outside the allowed range.
:required
Matches when a form element is required.
:optional
Matches when a form element is optional.
:user-invalid
Represents an element with incorrect input, but only when the user has interacted with it.

Tree-structural pseudo-classes

These pseudo-classes relate to the location of an element within the document tree.

:root
Represents an element that is the root of the document. In HTML this is usually the <html> element.
:empty
Represents an element with no children other than white-space characters.
:nth-child
Uses An+B notation to select elements from a list of sibling elements.
:nth-last-child
Uses An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.
:first-child
Matches an element that is the first of its siblings.
:last-child
Matches an element that is the last of its siblings.
:only-child
Matches an element that has no siblings. For example a list item with no other list items in that list.
:nth-of-type
Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.
:nth-last-of-type
Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.
:first-of-type
Matches an element that is the first of its siblings, and also matches a certain type selector.
:last-of-type
Matches an element that is the last of its siblings, and also matches a certain type selector.
:only-of-type
Matches an element that has no siblings of the chosen type selector.

Syntax

selector:pseudo-class {
  property: value;
}

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

Alphabetical index

Pseudo-classes defined by a set of CSS specifications include the following:

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