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

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:

A

:active :any-link :autofill

B

:blank

C

:checked :current

D

:default :defined :dir() :disabled

E

:empty :enabled

F

:first :first-child :first-of-type :fullscreen :future :focus :focus-visible :focus-within

H

:has() :host :host() :host-context() :hover

I

:indeterminate :in-range :invalid :is()

L

:lang() :last-child :last-of-type :left :link :local-link

N

:not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type()

O

:only-child :only-of-type :optional :out-of-range

P

:past :picture-in-picture :placeholder-shown :paused :playing

R

:read-only :read-write :required :right :root

S

:scope :state()

T

:target :target-within

U

:user-invalid

V

:valid :visited

W

:where()

Specifications

Specification
HTML Standard # pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

See also

Pseudo-elements

Last modified: Feb 22, 2022, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体)正體中文 (繁體) Change language