External Information: Pseudo-Classes and Pseudo-Elements

In CSSI, style is normally based on the tags and attributes found in the HTML source. This works fine for many design scenarios, but it doesn't cover some common design effects designers want to achieve.

Pseudo-classes and pseudo-elements were devised to fill in some of these gaps. Both are mechanisms that extend the expressive power of CSS. In CSSI, using pseudo-classes, you can change the style of a document's links based on whether and when the links have been visited, or based on how the user interacts with the document. Using pseudo-elements, you can change the style of the first letter and first line of an element, or add elements that were not present in the source document. Neither pseudo-classes nor pseudo-elements exist in HTML; that is, they are not visible in the HTML code. Both mechanisms have been designed so that they can be further extended in future versions of CSS; i.e., fill in more gaps.

This section describes the pseudo-classes to format hyperlinks and the pseudo-elements to set properties on the first letter and first line of a paragraph. Other pseudo-classes and pseudo-elements are introduced in the sections, "Advanced pseudo-classes," and "Advanced pseudo-elements."

The Anchor Pseudo-classes

In HTML, there is only one element that can be a hyperlink: the A (anchor) element. In document formats written in XML, there can be others. An anchor pseudo-class is a mechanism by which a browser indicates to a user the status of a hyperlink in the document the user is viewing.

A browser typically displays a link in a document in a different color from the rest of the text. Links that a user hasn't visited will be one color. Links the user has visited will be another color.

There is no way for an author to know whether a user has visited a link; this information is known only to the browser. However, you can set in the style sheet the colors that indicate the status of links. This is done by including an anchor pseudo-class in the selector (see Figure 4.8).

Figure 4.8. Anatomy of a rule with an anchor pseudo-class.

There are several things to note in Figure 4.8:

The selector is a combination of a type selector and a pseudo-class selector. Because only A elements can have anchor pseudo-classes in HTML, the A could have been omitted, but the selector arguably looks nicer.
The flag character is a colon (:). Both pseudo-classes and pseudo-elements use the colon as the flag character.

All links in a document (that is, all A elements with an HREF attribute) are automatically classified as either visited (:visited) or unvisited (:link).

Initially, a link is in pseudo-class "link." If the link has been visited recently, the browser puts it into pseudo-class "visited." (How recent the visit has to be is up to the browser.) The names of pseudo-classes and pseudo-elements are case-insensitive.

Here are some examples:

 A:link { color: red }         /* unvisited link */ A:visited { color: blue }     /* visited link */

The First-letter and First-Line Pseudo-Elements

Pseudo-elements allow you to set styles on a subpart of an element's content. Like pseudo-classes, pseudo-elements don't exist in the HTML code. Pseudo-elements have been introduced to allow for designs that would otherwise not have been possible.

Two of these pseudo-elements are "first-letter" and "first-line." The effects of these elements are not related to the structure of the HTML document. Rather, the effects are based on how the element is formatted. They enable you to impose styles on the first letter of a word and on the first line of a paragraph, respectively, independent of any other styles. Both can only be attached to block-level elements (that is, elements with their display property set to block; see Chapter 6, "The fundamental objects").

These effects are not new. Traditional printers have been using them for centuries, and you will often find them in contemporary magazines. A common usage is to increase the size of the first letter or make the first line use uppercase letters. However, you can also set the properties for color, background, text decorations, and case transformation, among others. See Figure 4.9 for an example.

Figure 4.9. The beginning of an article showing a "drop-cap."

According to the CSS1 specification, CSS1 browsers are not required to support pseudo-elements. CSS2.1 makes no such exception, but you may encounter browsers that do not support the first-letter and first-line pseudo-elements.

A pseudo-element has the general form shown in Figure 4.10.

Figure 4.10. Anatomy of a rule with a type selector, a class selector, and a pseudo-element.

A pseudo-element selector is almost always used in combination with other selectors. This is because you seldom want pseudo-element formatting on all elements in your document. Here, the pseudo-element selector is combined with two other selectors: a type selector (P) and a class selector (.initial). The resulting selector reads, "the first line of P elements with class name initial." This rule is the first step on the way to create a style sheet that replicates the style of magazine articles such as TIME. Let's put this rule into a complete document:

 <HTML>   <TITLE>The style of TIME magazine</TITLE>   <STYLE TYPE="text/css">     P.initial:first-line {       text-transform: uppercase }   </STYLE>   <BODY>     <H1>A sample article</H1>     <P CLASS=initial>The first line       of the first paragraph in a TIME       magazine article is printed in       uppercase letters.     <P>The text in the second paragraph       has no special formatting.   </BODY> </HTML>

It doesn't make any difference how long the line is or how many words are on it. Whatever text happens to fall on the first line is displayed in uppercase. See Figure 4.11. Because browser windows can be resized, there is no way to know how many words will be on the first line of a paragraph, so using a pseudo-element is the only way to achieve this effect.

Figure 4.11. Rendering of the first TIME example.

The style sheet for TIME magazine is still missing a key design feature: the drop-cap initial letter. A drop-cap initial is a common trick in typography: The first letter of a text is enlarged and "dropped" into the formatted paragraph. We can attach style rules to the first letter of an element by using, you guessed it, the "first-letter" pseudo-element:

 P.initial:first-letter { font-size: 200% }

The selector in this example reads, "The first letter of P elements with class name initial." That is, the style rule applies to the first letter of lines that were affected in the previous example. The whole rule says, "The first letter of P elements with class name initial should have a font size two times bigger than the surrounding text." Formatted, the text now looks like what's shown in Figure 4.12.

Figure 4.12. Rendering of the TIME example with a large initial.

We're almost there! The first letter now has the right size, but not the right position; it's not "dropped" into the formatted paragraph. By making the first letter "float" (discussed in Chapter 8, "Space Around Boxes"), we achieve the drop-cap effect. The HTML example becomes

 <HTML>   <TITLE>The style of TIME magazine</TITLE>   <STYLE TYPE="text/css">     P.initial:first-line {       text-transform: uppercase }     P.initial:first-letter {       font-size: 200%; float: left } </STYLE> <BODY>   <H1>A sample article</H1>   <P CLASS=initial>The first line     of the first paragraph in a TIME     magazine article is printed in     uppercase letters.   <P>The text in the second paragraph     has no special formatting.   </BODY> </HTML>

Our sample document is formatted as in Figure 4.13.