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
Pseudo-classes defined by a set of CSS specifications include the following:
A
B
:blank
'
C
D
E
F
H
I
L
N
:not()
:nth-child()
:nth-col()
':nth-last-child()
:nth-last-col()
':nth-last-of-type()
:nth-of-type()
O
P
R
S
T
U
V
W
:where()
'
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 |
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 |
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
Pseudo-classes by Mozilla Contributors is licensed under CC-BY-SA 2.5.