Pseudo-Classes and Pseudo-Elements (Cascading Style Sheets: The Definitive Guide)

Even more interesting, at least in terms of syntax, are the pseudo-class and pseudo-element selectors. These allow the author to assign styles to structures that don't necessarily exist in the document, or to things that are inferred by the state of certain elements, or even the state of the document itself. In other words, the styles are applied to pieces of a document based on something other than the structure of the document, and in a way that cannot be precisely deduced simply by studying the document's markup.

This may sound like we're applying styles at random. Not at all! Instead, the styles are applied based on somewhat ephemeral conditions that can't be predicted in advance. Nonetheless, the circumstances under which the styles will appear are well-defined. This is sort of like saying, "During a sporting event, whenever the home team scores, the crowd will cheer." You don't know exactly when during a game this will happen, but when the right conditions occur, the crowd will do just as predicted. The fact that you can't predict the exact second (or inning, or quarter) in which this will happen doesn't make the behavior any less expected whenever the home team does score.

2.4.1. Pseudo-Class Selectors

First we'll look at pseudo-class selectors, since they're better supported by browsers and therefore more widely used. Let's use an example to see how they work; this will take a minute before I reach the actual point, so bear with me.

Consider the anchor, which is used to set up a link from one document to another. Anchors are always anchors, of course, but some anchors refer to pages that have already been visited, while others refer to pages that haven't been visited yet. You can't tell which are which by simply looking at the HTML markup, because in the markup, all anchors look the same. Only by comparing the links in a document to the user's browser history is it possible to tell which links have been visited and which have not. So, in a certain sense, there are two basic types of anchors: visited and unvisited. In fact, these types are known as pseudo-classes, and the selectors that use them are called pseudo-class selectors. These cause, in a certain sense, ghostly classes to be applied to elements.

To see what I mean, let's consider for a moment how browsers behave with regard to links. The Mosaic convention was that links to pages you hadn't visited were blue, and links to already visited pages were red (this was modified to purple in succeeding browsers such as Internet Explorer). If you could only insert classes into anchors, such that any anchor you had visited would have a class of, say, "visited," then you could write a style to make such anchors red:

A.visited {color: red;}

<A HREF="http://www.w3.org/" CLASS="visited">W3C Web site</A>

Such an approach, however, would require that the classes on anchors change every time you visited a new page, which is a little silly. Instead, CSS defines pseudo-classes that make the anchors to visited pages act as though they have classes of "visited." Thus:

A:visited {color: red;}

There you have it -- any anchor that points to a visited page will now be red, and you don't even have to add CLASS attributes to any of the anchors. Note the colon (:) in the rule. The colon separating the A and the visited is the calling card of a pseudo-class or pseudo-element. All pseudo-class and pseudo-element keywords are preceded by a colon.

Here's another example:

A:visited {color: silver;}

<A HREF="http://www.w3.org/">W3C Web site</A><BR>
<A HREF="http://www.nowhere.net/">Nowhere in particular</A>

As you can guess from Figure 2-13, the first anchor points to an already visited page, and so it's silver, whereas the second anchor is still blue, since the browser hasn't loaded that page before.

Figure 2-13. Pseudo-classes in action

In CSS1, there are only three pseudo-classes. We've already seen :visited , and in addition, there are :link and :active. Each refers to a different kind of anchor, as shown in Table 2-1.

Table 2-1. Psuedo-classes

Name	Description
:link	Refers to any anchor that is a hyperlink (i.e., has an `HREF` attribute) and that points to an address that has not been visited. Note that some browsers may interpret `:link` to refer to any hyperlink, visited or unvisited.
:visited	Refers to any anchor that is a hyperlink to an already visited page.
:active	Refers to any anchor that is in the process of being activated (e.g., clicked). In CSS1, this applies only to hyperlinks, whereas in CSS2, `:active` can theoretically apply to any element.

The first of the pseudo-classes in Table 2-1 may seem a little bit redundant. After all, if an anchor hasn't been visited, then it must be unvisited, right? Therefore, all we should need is the following:

A {color: blue;}
A:visited {color: red;}

That seems reasonable, but actually it's not quite enough. The first of the rules shown here will apply not only to unvisited links, but also target anchors such as this one:

<A NAME="section4">4. The Lives of Salmon</A>

The text shown would be blue, because the A element will match the first rule shown before. Therefore, in order to avoid applying your link styles to target anchors, use the :link pseudo-class:

A:link {color: blue;}    /* unvisited links are blue */
A:visited {color: red;}   /* visited links are red */
A:active {color: yellow;}  /* anchors turn yellow while clicked */

As you may have already realized, the :link , :visited , and :active selectors are functionally equivalent to the BODY attributes LINK , VLINK , and ALINK . In the case of the CSS pseudo-classes, of course, you can apply more than just colors.

Assume that an author wishes to create a page in which all anchors are purple if the linked pages haven't been visited, red if they have been, and yellow as the user clicks them. In HTML, this could be done as follows:

<BODY LINK="purple" VLINK="red" ALINK="yellow">

In CSS, this would be accomplished as:

A:link {color: purple;}
A:visited {color: red;}
A:active {color: yellow;}

This is a good place to bring class selectors back in and show how they can be combined with pseudo-classes. For example, let's say you wish to change the color of any link that points outside your own site. If you assign a class to each of these anchors, it's easy. For example:

<A HREF="http://www.mysite.net/">My home page</A>
<A HREF="http://www.site.net/" CLASS="external">Another home page</A>

In order to apply different styles to the external link, all you need is a rule like this:

A.external:link, A.external:visited {color: maroon;}

This will have the effect of setting the second anchor in the preceding markup to be maroon, while the first will be the default color for hyperlinks (usually blue).

2.4.1.1. Real-world issues

There are some interesting issues with the anchor pseudo-classes. For example, it would be possible to set visited and unvisited links to one font size, and active links to have a larger size:

A:link, A:visited {font-size: 12pt;}
A:active {font-size: 18pt;}

As you can see in Figure 2-14, the user agent has increased the size of the anchor as it's being clicked. A user agent that supports this behavior is forced to redraw the document as an anchor is being clicked. However, the CSS specifications specifically state the user agents are not required to do redraw a document once it's been drawn for initial display, so you can't absolutely rely on this happening. Whatever you do, avoid designs that depend on such behavior!