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 |