How-To: CSS pseudo-classes and pseudo-elements.

Pseudo-classes and pseudo-elements allow you to format elements that lie outside the document tree. A Pseudo-Class can be used to address an element based on its dynamic state. A Pseudo-Element can be used to address sub-parts of an element.

Anchor/Link Pseudo-Classes

:link - a link that has not been used, nor is a mouse pointer hovering over it.
:visited - a link that has been used before, but has no mouse hovering over it.
:hover - a link that currently has a mouse pointer hovering over it.
:focus - an element which has the focus (used when navigating with the keyboard.)
:active - a link that’s in the process of being clicked.

The order in which these classes are defined within a CSS stylesheet is important, :hover must come after :link and :visited, and :active must come after :hover
To remember the correct order: Link - Visited - Hover - Focus - Active, use the mnemonic LoVe HAte (or Lord Vader’s Handle Formerly Anakin).

Pseudo-classes can be stacked, so to address only visited links on hover, use:

a:visited:hover {color: red; text-decoration: underline;}

Examples:

a:link {color: #00F; text-decoration: none;}
a:visited {color: #711B8D; text-decoration: none;}
a:visited:hover {color: #0F0; text-decoration: underline;}
a:hover {color: #00F; text-decoration: underline;}
a:focus {color: green;}
a:active {color: #00F;}

Mozilla and Webkit have vendor extensions to allow combining pseudo classes, not that there is any great need: -webkit-any and -moz-any

Other Pseudo-Classes

:lang(language) - Select elements with a matching lang attribute determined by a combination of the "lang" attribute, the META element, (and possibly by HTTP headers).
:first-child - Format the first child of the parent element.
:first-of-type :last-of-type :only-of-type :only-child :nth-child(n) :nth-last-child(n) :nth-of-type(n) :last-child :root :empty :target :enabled :disabled :checked ::selection

::selection - Format the background color of text when selected.

Examples:

Make the second column of a table red:
td:nth-child(2) {color: red;}

Make text with the class .yellow appear Yellow when selected (via CSS tricks)

p.yellow::selection { background: #fff2a8;}

Pseudo-Elements

:first-line - Format the first line only.
:first-letter - Format the first letter only.
:before - Before the content of the selected element(s)
:after - After the content of the selected element(s)

As of CSS 3.0 pseudo-elements use a double colon prefix :: instead of : this is to distinguished them from pseudo-classes. Most browsers will accept either.

Examples:

Display '---' before and '~~~' after each <p> element, notice that these Pseudo elements are not selectable on the final page:

p::before {content:'---'}
p::after {content:'~~~'}

Display a drop-cap effect with the first line in small caps, resize the browser window to see the full effect, this is displayed below:
#dropcap:first-line { font-variant: small-caps; font-family: Verdana, sans;}

#dropcap:first-letter {
   color: #ff0084;
   float: left;
   font-size: 600%; 
   font-family: Times, Serif;
   font-weight: bold;
   left: -3px; 
   line-height: 0.8em;
   padding: 0 5px 0 0; 
   position: relative;
   }

The Comte de Lamothe, who, in 1815, was an old man seventy-five years of age, had nothing remarkable about him except his silent and sententious air, his cold and angular face, his perfectly polished manners, his coat buttoned up to his cravat, and his long legs always crossed in long, flabby trousers of the hue of burnt sienna. His face was the same color as his trousers. This M. de Lamothe was "held in consideration" in this salon on account of his "celebrity" and, strange to say, though true, because of his name of Valois. As for M. Gillenormand, his consideration was of absolutely first-rate quality. He had, in spite of his levity, and without its interfering in any way with his dignity, a certain manner about him which was imposing, dignified, honest, and lofty, in a bourgeois fashion; and his great age added to it. One is not a century with impunity.

“Intellectuals are useless, and as a pseudo-intellectual I can't help but envy the practicality of that” ~ Bauvard (The Prince Of Plungers )

Related:

color - Text color.
outline - Set outline properties.
font-style - Font style italic/normal.
font-weight - Normal, bold, bolder.
text-decoration - Add decoration to text.
CSS Bakery - Methods to create Drop Caps.