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 selectorPurpose
:linkControls 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.
:visitedControls the appearance of visited links. Quite a few restrictions on styles in terms of what can be applied, due to security risks.
:hoverControls 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.
:activeThe 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-childSelects 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-childSelects 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.
:focusSelects links that have been reached via keyboard navigation and form elements that are selected, such as text inputs and textareas.
:only-childSelects an element if it is the only child of a parent.
:first-of-typeSelects the first appearance of an element
:last-of-typeSelects the last appearance of an element.
:only-of-typeSelects 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).
:validThe state of a form element that is considered valid to a defined pattern of characters or numbers.
:invalidThe state of a form element with content that is considered invalid.
:checkedSelects 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 to learn more.