Pseudo-class selectors

Pseudo-class selectors affect elements in certain states: for example, a:hover controls the appearance of links during a momentary touch on a mobile device, or on mouse hover. In contrast, pseudo-element selectors control the appearance of portions of an element’s content, such as the first line or letter of a paragraph.

The table below covers all the current pseudo-class selectors in CSS, with links to appropriate articles on the selectors:

CSS Pseudo-class selectors
Pseudo-class selector	Purpose
`:link`	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.
`:visited`	Controls the appearance of visited links. Quite a few restrictions on styles in terms of what can be applied, due to security risks.
`:hover`	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, CSS does not explicitly specify this association. In modern browsers, `:hover` can be applied to any arbitrary element, such as `img:hover`.
`:active`	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 transient.
`:first-child`	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.
`:last-child`	Selects the last child element in a sequence.
`:nth-child(n)`	Selects children in an element sequence, in iterations of `(n)`, where `n` is the word `odd`, `even`, a number, or a mathematical expression.
`:nth-of-type(n)`	Selects the nth appearance of a particular element.
`:focus`	Selects links that have been reached via keyboard navigation and form elements that are selected, such as text inputs and textareas.
`:only-child`	Selects an element if it is the only child of a parent.
`:first-of-type`	Selects the first appearance of an element
`:last-of-type`	Selects the last appearance of an element.
`:only-of-type`	Selects an element if it is the only child of a particular type inside its parent.
`:nth-last-child(n)`	Counts backwards from the end of a set of child elements.
`:nth-last-of-type(n)`	Counts backwards from the end of a set of child elements to include a certain sequence of tags.
`:not(S)`	Matches elements that are not (`S`).
`:valid`	The state of a form element that is considered valid to a defined pattern of characters or numbers.
`:invalid`	The state of a form element with content that is considered invalid.
`:checked`	Selects form elements that are checked, such as radio buttons and checkboxes.

Note that pseudo-selectors can be strung together: a:visited:hover, for example.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.