Pseudo selectors - CSS Quick Syntax Reference Guide - page 14

The content property is special in that it can be used only together with these
two pseudo-elements. It is also the only property that breaks the line between content
(HTML) and design (CSS). Keep in mind that this line should be broken only when
the presence of a piece of content comes down to a design decision. For example, the
content property can be used to add an icon before an element, which can be done using
the url function.
p.bullet:before { content: url(my-bullet.png); }
Pseudo-classes
Pseudo-classes permit styling based on element relationships and on information
not found in the HTML document. Most of them fall into three categories: dynamic,
structural, and user interface pseudo-classes.
Dynamic pseudo-classes
The first category of pseudo-classes is used to apply styles to links or other interactive
elements when their state is changed. There are five of them, all of which were introduced
in CSS 2.
link and visited
The dynamic pseudo-classes :link and :visited can be applied only to the anchor
element ( <a> ). The :link pseudo-class matches links to pages that have not been viewed,
whereas :visited matches links that have been viewed.
a:link {} /* unvisited links */
a:visited {} /* visited links */
active and hover
Another pseudo-class is :active , which matches elements as they are being activated, for
example by a mouse click. This is most useful for styling anchor elements, but it can be
applied to any element.
a:active {} /* activated links */
A selector with the :hover pseudo-class appended to it is applied when the user
moves a pointing device, such as a mouse, over the selected element. It is popularly used
to create link roll-over effects.
a:hover {} /* hovered links */