A pseudo-class is similar to a class in HTML, but it’s not specified explicitly in the markup. Some pseudo-classes are dynamic—they’re applied as a result of user interaction with the document.

A pseudo-class starts with a colon (:). No whitespace may appear between a type selector or universal selector and the colon, nor can whitespace appear after the colon.

CSS1 introduced the :link, :visited, and :active pseudo-classes, but only for the HTML a element. These pseudo-classes represented the state of links—unvisited, visited, or currently being selected—in a web page document. In CSS1, all three pseudo-classes were mutually exclusive.

CSS2 expanded the range of pseudo-classes and ensured that they could be applied to any element. :link and :visited now apply to any element defined as a link in the document language. While they remain mutually exclusive, the :active pseudo-class now joins :hover and :focus in the group of dynamic pseudo-classes. The :hover pseudo-class matches elements that are being designated by a pointing device (for example, elements that the user’s hovering the cursor over); :active matches any element that’s being activated by the user; and :focus matches any element that is currently in focus (that is, accepting input).

CSS2 also introduced the :lang pseudo-class to allow an element to be matched on the basis of its language, and the :first-child pseudo-class to match an element that’s the first child element of its parent.

CSS3 promises an even greater range of powerful pseudo-classes.

Remember that pseudo-classes, like ID selectors and attribute selectors, act like modifiers on type selectors and the universal selector: they specify additional constraints for the selector pattern, but they don’t specify other elements. For instance, the selector li:first-child matches a list item that’s the first child of its parent; it doesn’t match the first child of a list item.

A simple selector can contain more than one pseudo-class if the pseudo-classes aren’t mutually exclusive. For example, the selectors a:link:hover and a:visited:hover are valid, but a:link:visited isn’t because :link and :visited are mutually exclusive. An element is either an unvisited link or a visited link.

The order of declaration is very important for the dynamic pseudo-classes :hover, :focus, and :active, depending on what you wish to achieve. The most commonly desired behavior for links is as follows:

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:focus {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}
a:active {
  ⋮ declarations
}

The :link and :visited pseudo-classes should generally come first.¹ Next should be :focus and :hover—they’re specified now so that they override and apply to both visited and unvisited links. If :focus precedes :hover, the hover effect will apply to links with keyboard input focus. The :active pseudo-class should always come last, since we usually want to indicate clearly any links that have been activated.

This isn’t the only useful order, nor is it in any way the “right” order. The order in which you specify your pseudo-classes will depend on the effects you want to show with different combinations of states. It’s possible, for instance, that you might want to have different hover or focus effects on visited and unvisited links. In that case, you could combine pseudo-classes: a:link:hover.

If you want to apply special styling to the hover state of a link that also has keyboard input focus, use a:focus:hover.