What are pseudo-class selectors in CSS, and what is the rule about ordering link states?

A pseudo-class (written selector:state) styles an element based on a state or situation it is in — such as a link being hovered — rather than on its markup.

The classic example is styling the four states a hyperlink can be in. They must be written in a specific order, because a later rule of equal specificity wins and the wrong order would let one state mask another:

a:link    { color: blue; }    /* not yet visited */
a:visited { color: purple; }  /* already visited */
a:hover   { color: red; }     /* mouse is over it */
a:active  { color: black; }   /* in the moment of clicking */

The memory aid for this order is "LoVe HAte" — Link, Visited, Hover, Active.

Pseudo-classes go well beyond links. A very common one is :focus, which styles a form field while the user is typing in it:

input:focus { border-color: blue; }

Closely related are :first-line and :first-letter, which target the first line or first letter of a block of text (e.g. for a drop-cap). Strictly these are pseudo-elements — modern CSS writes them with :: — but they share the same "select a sub-part by situation" idea.