CSS Pseudo-classes

To style an element in a special state, add a keyword called a pseudo-class to its selector.

Typical jobs for pseudo-classes: reacting when the user hovers over an element, telling visited links apart from unvisited ones, marking an element that has focus, styling form elements that are valid, invalid, required or optional, and picking out an element that is its parent's first child.

A single colon (:) comes first, then the name of the pseudo-class.

User interaction drives the interactive pseudo-classes. :hover applies while the mouse is over an element, :focus while an element has focus and :active while it is being activated; :link covers unvisited links and :visited covers visited ones.

An element's position in the document tree drives the structural pseudo-classes. :first-child matches a parent's first child, :last-child its last child and :nth-child(n) its nth child. :lang() is grouped here too, although it matches a specific language rather than a position.