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 hovers over it.
div:hover {
background-color: #F89B4D;
} 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.
selector:pseudo-class {
property: value;
}
Like regular classes, you can chain together as many pseudo-classes as you want in a selector.
:active:any:any-link:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited| Specification | Status | Comment |
|---|---|---|
| Fullscreen API | Living Standard | Defined :fullscreen. |
| HTML Living Standard | Living Standard | No change from HTML5. |
| Selectors Level 4 | Working Draft | Defined :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column(), and :matches().No significant change for pseudo-classes defined in Selectors Level 3 and HTML5 (though semantic meaning not taken over). |
| HTML5 | Recommendation | Defined the semantic meaning, in the HTML context, of :link, :visited, :active, :enabled, :disabled, :checked, and :indeterminate.Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write, and :dir(). |
| CSS Basic User Interface Module Level 3 | Candidate 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. |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes