Pseudo-class selectors define the appearance of an element in a particular state. Where appropriate, I have linked to examples in this blog. (Note: this entry is currently under revision).
CSS Pseudo-class selectors
|Pseudo-class selector ||Purpose|
|Controls the appearance of an unvisited link. Strongly associated with the |
a tag, to the point at which the
a selector used by itself before a style declaration accomplishes the same thing.
|Controls the appearance of visited links|
|Controls the appearance of an element while it is being hovered over with a mouse or other pointing device. While it is heavily associated with the |
a tag (IE 6 & 7 only support
a:hover) CSS does not explicitly specify this association. In modern browsers,
:hover can be applied to any arbitrary element, such as
|The appearance of content while the user is clicking on it, i.e. between the mouse button being held down and it being released. Rarely used, since the effect is usually so transient. |
|Selects the first child element of a markup sequence. For example, |
ul li:first-child would specify that the style declaration applies to the first
li element in any unordered list.
|Selects the last child element in a sequence.|
|Selects the child in an element sequence iterations of |
N is the word
even, a number, or a mathematical expression.
|Selects links that have been reached via keyboard navigation and form elements that are selected, such as text inputs and textareas. |
|The state of a form element that is considered valid to a defined pattern of characters or numbers.|
|The state of a form element with content that is considered invalid|
|Selects form elements that are checked, such as radio buttons or checkboxes. |
Note that pseudo-selectors can be strung together:
a:visited:hover, for example.