11.2.1. Pseudo-Elements

A pseudo-element gets its name because the CSS declaration of this type causes the browser to act as if it has inserted an artificial element into an existing element. For example, CSS1 defines pseudo-elements for the first letter and first line of a block-level element. The HTML source code for the real element might be something simple:

But a browser that implements the :first-letter and :first-line pseudo-elements would treat the p element as if it were structured as follows:

<p><p:first-line><p:first-letter>A</p:first-letter> mere 
paragraph.</p:first-line></p>

The location of the </p:first-line> end tag, of course, depends on the rendered version of the p element. If the paragraph were sized to fit a narrow column, and the first line word-wrapped after the word "mere," the :first-line pseudo-element's invisible end tag would follow the space after "mere." The point of all of this is that you can assign numerous style attributes to these very specific portions of a block-level element, such as a drop capital letter:

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

or an all-uppercase first line:

Regardless of the pseudo-element structure or style assignments, the document tree is unaffected. In the simple p element example, the element contains one text child node.

Table 11-1. CSS2 pseudo-elements

11.2.2. Pseudo-Classes

a {text-decoration:none}
a:hover {text-decoration:underline}
#specialA:hover {color:red}

The classness of a pseudo-class is not always based on an element's state. Document tree context, page position (right or left), and even language are examples of the possibilities that pseudo-classes afford. For example, the :first-child pseudo-class turns its associated element into a special class (i.e., a class capable of defining its own style attributes) whenever the element is a first child element in a document tree. Thus, the following style rule applies a different font size for every p element that is the first child of any container with the class name section:

The use here of the > child selector limits the scope of the p:first-child pseudo-class to first children of specific containers. Removing the child selector would cause the rule to apply to any p element that is the first child of any other container.

Table 11-2. CSS2 Pseudo-classes