Dynamic HTML: The Definitive Reference

Pseudo-Elements and Pseudo-Classes

Most style sheet rules are associated with distinct HTML elements or groups of elements identified via style sheet selectors, such as classes, IDs, and contextual selectors (see Chapter 3). In rare instances, you might want to assign a style to a well-defined component of an element or to all elements that exhibit a particular state. CSS2 recommends that browsers expose the first letter and first line of a paragraph so that a style sheet rule can focus only on that portion of the element. For example, by careful application of attributes, you can create a drop cap initial letter for a paragraph with the following definition:

P:first-letter {font-size: 36pt; font-weight: 600; 
                font-family: Rune serif; float: left}

This kind of subcomponent is called a pseudo-element. A pseudo-element is connected to an element by virtue of the colon delimiter.

The A element has readily distinguishable states: a link that has not been visited, a link being clicked on, a link that has been visited in recent history. These states are called pseudo-classes; they work like class selector definitions but don’t have to be labeled as such in their element tags.

Table 10.1provides a summary of pseudo-elements supported in CSS2. None of these are implemented in the Version 4 browsers but will likely be available in future browsers.

Table 10-1. CSS2 Pseudo-Elements

Name	NN	IE	CSS	Description
:after	-	-	2	The space immediately after an element (see content attribute) ...