It is a CSS technique that sets the style when an element changes its state. E.g. style changes when mouse hover, different styles for visited or unvisited links, etc.
There are four different types of pseudo-classes:
- Links: These pseudo-classes are used to style the link both in its normal state by default and when it has already been visited
- Dynamic: Dynamic pseudo-classes can be applied to any element to define how they are shown when the cursor is located on them, or by clicking on them or when they are selected
- Structural: Structural pseudo-classes allow to style elements based on an exact numerical position of the element
- Others: Some elements can be styled differently based on the language or what type of label they are not.
Format | Name | Elements are styled if | Compatibility |
---|---|---|---|
Link and Dynamic Pseudo-classes | |||
: link | Link | the value of the href attribute is not in the history | IE4, FF1, O3.5, S1, CSS1 |
: visited | Link Visited | the value of the href attribute is in the history | IE4, FF1, O3.5, S1, CSS1 |
: target | Target Link | a targeted link | FF1.3, O9.5, S1.3, CSS3 |
: active | Active | the element has been clicked | IE7, FF1, O3.5, S1, CSS1 |
: hover | On | the cursor is over the element | IE4 *, FF1, O3.5, S1, CSS2 |
: focus | Focus | the element captures the focus of the document | IE7, FF1, O7, S1, CSS2 |
* Only available for the item before IE7 | |||
Structural and Other Pseudo-classes | |||
: root | Root | is the main element of a document | FF1.5, O9.5, S3.1, C3, CSS3 |
: empty | Empty | does not have child nodes | FF1.5, O9.5, S3.1, C3, CSS3 |
: only-child | Only son | has no sibling nodes | FF1.5, O9.5, S3.1, C3, CSS3 |
: only-of-type | Type Only | has a unique selector among its siblings | FF1.5, O9.5, S3.1, C3, CSS3 |
: first-child | First son | is the first child node of another element | FF1.5, O9.5, S3.1, C3, CSS3 |
: nth-of-type (n) | Nth of Type | is the nth element with that selector | FF1.5, O9.5, S3.1, C3, CSS3 |
: last-child | Last son | is the last child node of an element | FF1.5, O9.5, S3.1, C3, CSS3 |
: first-of-type | First of the Kind | is the first element of its selector type in the parent element | FF1.5, O9.5, S3.1, C3, CSS3 |
: last-of-type | Last of the Type | is the last element of its selector type in the parent element | FF1.5, O9.5, S3.1, C3, CSS3 |
: lang | Language | has a specifically defined language code | IE8, FF1.5, O9.5, S3.1, C3, CSS2.1 |
: not | Denial | you are not using a specific selector | FF1.5, O9.5, S3.1, C3, CSS3 |