{{ CSSRef() }}
A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example {{ Cssxref(":hover") }} will apply a style when the user hovers over the element specified by the selector.
Pseudo-classes, together with {{ Cssxref("pseudo-elements") }}, 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 some form elements), or the position of the mouse (like {{ cssxref(":hover") }} which lets you know if the mouse is over an element or not).
Syntax
selector:pseudo-class { property: value; }
Index of standard pseudo-classes
- {{ Cssxref(":active") }}
- {{ Cssxref(":checked") }}
- {{ Cssxref(":default") }}
- {{ Cssxref(":dir", ":dir()")}}
- {{ Cssxref(":disabled") }}
- {{ Cssxref(":empty") }}
- {{ Cssxref(":enabled") }}
- {{ Cssxref(":first") }}
- {{ Cssxref(":first-child") }}
- {{ Cssxref(":first-of-type") }}
- {{ Cssxref(":fullscreen") }}
- {{ Cssxref(":focus") }}
- {{ Cssxref(":hover") }}
- {{ Cssxref(":indeterminate") }}
- {{ Cssxref(":in-range") }}
- {{ Cssxref(":invalid") }}
- {{ Cssxref(":lang", ":lang()") }}
- {{ Cssxref(":last-child") }}
- {{ Cssxref(":last-of-type") }}
- {{ Cssxref(":left") }}
- {{ Cssxref(":link") }}
- {{ Cssxref(":not", ":not()") }}
- {{ Cssxref(":nth-child", ":nth-child()") }}
- {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
- {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
- {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
- {{ Cssxref(":only-child") }}
- {{ Cssxref(":only-of-type") }}
- {{ Cssxref(":optional") }}
- {{ Cssxref(":out-of-range") }}
- {{ Cssxref(":read-only") }}
- {{ Cssxref(":read-write") }}
- {{ Cssxref(":required") }}
- {{ Cssxref(":right") }}
- {{ Cssxref(":root") }}
- {{ Cssxref(":scope") }}
- {{ Cssxref(":target") }}
- {{ Cssxref(":valid") }}
- {{ Cssxref(":visited") }}
Specifications
Specification | Status | Comment |
---|---|---|
{{ SpecName('Fullscreen') }} | {{ Spec2('Fullscreen') }} | Defined :fullscreen . |
{{ SpecName('HTML WHATWG') }} | {{ Spec2('HTML WHATWG') }} | No change from {{ SpecName('HTML5 W3C') }}. |
{{SpecName('CSS4 Selectors')}} | {{Spec2('CSS4 Selectors')}} | 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 {{SpecName('CSS3 Selectors')}} and {{SpecName('HTML5 W3C')}} (though semantic meaning not taken over). |
{{ SpecName('HTML5 W3C') }} | {{ Spec2('HTML5 W3C') }} | 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() . |
{{ SpecName('CSS3 Basic UI') }} | {{ Spec2('CSS3 Basic UI') }} | Defined :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only , and :read-write , but without the associated semantic meaning. |
{{SpecName('CSS3 Selectors')}} | {{Spec2('CSS3 Selectors')}} | 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 {{SpecName('CSS2.1')}}. |
{{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | Defined :lang() , :first-child , :hover , and :focus .No significant change for pseudo-classes defined in {{SpecName('CSS1')}}. |
{{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Defined :link , :visited , and :active , but without the associated semantic meaning. |
See Also
- {{ Cssxref("pseudo-elements") }}