Pseudo-classes

CSS pseudo-classes  classify elements by features that can not be deduced from document tree (name, attributes or content). They are used to add styles to an element in its a certain state or to an element that is in a certain position in the document tree. That means they may be dynamic – the element may gain and lose a pseudo-class while a user interact with the document. The exceptions are: :first-child and :lang()

CSS pseudo-classes:

  • do not appear in the document source or document tree
  • their names are case-insensitive
  • can appear anywhere in selector chain ( check the sequence of simple selectors ) in contrast to pseudo-elements that they may only be appended after the last simple selector of the selector.

Syntax:

selector:pseudo-class {
    property:value;
}
Name Description Specification
:active Selects active elements. CSS Level 1
:checked Selects a checked input or option element Selectors Level 3
:disabled Selects disabled elements Selectors Level 3
:empty Selects elements without children at all. Selectors Level 3
:enabled Selects enabled elements Selectors Level 3
:first Represents the first page when printing a document CSS Level 2 (Revision 1)
:first-child Selects element that is the first child of its parent Selectors Level 3
:first-of-type Selects element that is the first child of its parent Selectors Level 3
:forcus Selects elements that have focus CSS Level 2
:hover Selects elements on mouse over CSS Level 2
:in-range Selects an element that has its attribute inside the specified range limitations. Selectors Level 4
:invalid Selects elements with invalid value CSS Basic User Interface
Module Level 3
:lang(language) Selects elements with a lang attribute value set on ‘language’ CSS Level 2
:last-child Selects element that is the last child of ist parent Selectors Level 3
:last-of-type Selects element that is the last child of given type of its parent Selectors Level 3
:link Selects links inside elements CSS Level 1
:not(selector) Selects elements that are not ‘selector’ element Selectors Level 3
:nth-child(n) Select an element that is the ‘n’ child of its parent Selectors Level 3
:nth-last-child(n) Select an element that is the ‘n’ child of its parent, counting from the last child Selectors Level 3
:nth-last-of-type(n) Select an element that is the ‘n’ child of given type of its parent, counting from the last child Selectors Level 3
:nth-of-type(n) Select an element that is the ‘n’ child of given type of its parent Selectors Level 3
:only-child Selects an element that is the only element of its parent Selectors Level 3
:only-of-type Selects an element that is the only element of given type of its parent Selectors Level 3
:optional Selects elements with no  “required” attribute CSS Basic User Interface
Module Level 3
:out-of-range Selects elements with a value outside a specified range Selectors Level 4
:read-only Selects elements that have a “readonly” attribute specified CSS Basic User Interface
Module Level 3
:read-write Selects elements that are editable by user CSS Basic User Interface
Module Level 3
:required Selects elements that have a “required” attribute specified CSS Basic User Interface
Module Level 3
:root Selects the document’s root element of a tree document Selectors Level 3
:target Selects the current active element (clicked on a URL containing that anchor name) Selectors Level 3
:valid Selects elements that have a valid value CSS Basic User Interface
Module Level 3
:visited Selects visited elements CSS Level 1

Resources