files/en-us/web/css/reference/selectors/pseudo-classes/index.md
A CSS pseudo-class is a keyword added to a selector that lets you select elements based on information that lies outside of the document tree, such as a specific state of the selected element(s). For example, the pseudo-class {{CSSxRef(":hover")}} can be used to style a button when a user's pointer hovers over it.
/* Any button over which the user's pointer is hovering */
button:hover {
color: blue;
}
A pseudo-class consists of a colon (:) followed by the pseudo-class name (e.g., :hover). A functional pseudo-class also contains a pair of parentheses to define the arguments (e.g., :dir()). The element that a pseudo-class is attached to is defined as an anchor element (e.g., button in case button:hover).
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 ({{CSSxRef(":visited")}}, for example), the status of its content (like {{CSSxRef(":checked")}} on certain form elements), or the position of the mouse (like {{CSSxRef(":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.
These pseudo-classes relate to the core identity of elements.
<h1>-<h6>).These pseudo-classes enable the selection of elements based on their display states.
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.
placeholder attribute in the {{htmlelement("input")}} and {{htmlelement("textarea")}} elements.These pseudo-classes reflect the document language and enable the selection of elements based on language or script direction.
These pseudo-classes relate to links, and to targeted elements within the current document.
[!NOTE] A
:target-withinpseudo-class, to match elements that are or have a descendant which is the target of the document URL, was defined but removed from the specification. Use:has(:target)for this purpose.
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.
These pseudo-classes apply when viewing something which has timing, such as a WebVTT caption track.
These pseudo-classes relate to the location of an element within the document tree.
<html> element.An+B notation to select elements from a list of sibling elements.An+B notation to select elements from a list of sibling elements, counting backwards from the end of the list.An+B notation to select heading elements (<h1>-<h6>).An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.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.These pseudo-classes relate to the shadow DOM.
These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.
These pseudo-classes accept a selector list or forgiving selector list as a parameter.
These pseudo-classes apply to custom elements.
These pseudo-classes relate to pages in a printed document and are used with the {{CSSxRef("@page")}} at-rule.
:blank
These pseudo-classes relate to elements involved in a view transition.
selector:pseudo-class {
property: value;
}
Like regular classes, you can chain together as many pseudo-classes as you want in a selector.
Pseudo-classes defined by a set of CSS specifications include the following:
A
B
:blank (page)C
D
E
F
H
I
L
M
N
O
P
R
S
T
U
V
W
Non-standard vendor-prefixed pseudo-classes include:
-moz- prefix{{Specifications}}