Pseudo class selector specifies a special state of the selected element(s).
Styles defined by these selectors can be overridden by each other. To style links properly use LVHA-order: :link — :visited — :hover — :active.
| name | description |
|---|
| :empty | Represents any element that has no children. Children can be either element nodes or text, including whitespace. Comments, processing instructions, and CSS content do not affect whether an element is considered empty. |
| :first-child | Represents the first element among a group of sibling elements. |
| :first-of-type | Represents the first element of its type among a group of sibling elements.
/* select all p that is the first
p element in its parent*/
p:first-of-type {
...
}
|
|
:nth-child(n)
|
Matches elements based on their position in a group of siblings.
- n - can be number, expression like
An+B, predefined name:
- odd - expression 2n+1
- even - expression 2n
/* Selects the second li element
in a list */
li:nth-child(2) {
color: lime;
}
See more examples.
|
| :nth-of-type(n) |
Matches elements of a given type, based on their position among a group of siblings.
- n - can be number, expression like
An+B, predefined name:
- odd - expression 2n+1
- even - expression 2n
|
| :nth-last-child(n) | Matches elements based on their position among a group of siblings, counting from the end. n like at :nth-child(n). |
| :nth-last-of-type(n) | Matches elements of a given type, based on their position among a group of siblings, counting from the end. n like :nth-of-type(n) |
| :last-child | Represents the last element among a group of sibling elements. |
| :last-of-type | Represents the last element of its type among a group of sibling elements. |
| :only-child | Represents an element without any siblings. |
| :only-of-type | Represents an element that has no siblings of the same type. |
| name | description |
|---|
| :checked | Represents an element that has not yet been visited. It matches every unvisited a, area or link element that has an href attribute. |
| :disabled | Represents any disabled element. An element is disabled if it can't be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has an enabled state, in which it can be activated or accept focus. |
| :enabled | Represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus. The element also has a disabled state, in which it can't be activated or accept focus. |
| :focus | Represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's "tab" key. |
| :in-range |
Represents an input element whose current value is within the range limits specified by the min and max attributes.
|
| :invalid | Represents any input or other form element whose contents fail to validate. |
| :optional | Represents any input,
select, or textarea element that does not have the required attribute set on it. |
| :out-of-range | Represents an input element whose current value is outside the range limits specified by the min and max attributes. |
| :read-only | Represents an element input
or textarea that is not editable by the user. |
| :read-write | Represents an element input
or textarea that is editable by the user. |
| :required | Represents any input, select or
textarea element that has the required attribute set on it. It is useful for highlighting fields that must have valid data before a form can be submitted. |
| :valid | represents any input or other form element whose contents validate successfully. It is useful for highlighting correct fields for the user. |