Web Development and Design Foundations with XHTML, 5th Edition

(^276) Chapter 7 More on Links, Lists, and Layout

7.2CSS Pseudo-Classes and Links

Have you ever visited a Web site and found that the text hyperlinks changed color when

you moved the mouse pointer over them? Often, this is accomplished using a special

technique in CSS called a pseudo-class. The four pseudo-classes that can be applied to

the anchor tag are shown in Table 7.1. The link pseudo-classconfigures the appearance

of the hyperlink before it is clicked. The visited pseudo-classconfigures the appearance

of the hyperlink after it is clicked. The focus pseudo-classconfigures the appearance of

the hyperlink when it has keyboard focus—for example, by pressing the Tab key. This is

helpful for users with a physical disability because it can inform them when they have

reached a specific hyperlink when using the keyboard. The hover pseudo-classconfigures

the hyperlink as the mouse is held or “hovered” over it. The active pseudo-class

configures the appearance of the hyperlink while it is being clicked.

Notice the order in which the pseudo-classes are listed in Table 7.1. Anchor element pseudo-

classes must be coded in this order (although it’s okay to omit one or more of those listed).

If you code the pseudo-classes in a different order, the styles will not be reliably applied. It’s

common practice to configure the focus and active pseudo-classes with the same styles.

Table 7.1Commonly used CSS pseudo-classes

Pseudo-class When Applied

link Default state for a hyperlink that has not been clicked (visited)

visited Default state for a visited hyperlink

focus Triggered when the link has focus (for example, by pressing the

Tab key on the keyboard)

hover Triggered when the mouse moves over the hyperlink

active Triggered when the hyperlink is actually clicked

The syntax of pseudo-classes uses a colon (:) to apply the pseudo-classto the anchor

selector. The following code sample will configure text hyperlinks to be red initially.

The sample also uses the hover pseudo-class, a:hover, to configure the links to change

their appearance when the visitor places the mouse pointer over them so that the

underline disappears and the color changes.

<style type="text/css">

a:link { color: #ff0000;

}

a:hover { text-decoration: none;

color: #000066;

}

</style>

Figure 7.4 shows part of a Web page that uses a similar technique. Note the position of

the mouse pointer over the Print This Page hyperlink—the text color has changed and

has no underline.

While some Web design experts, such as Jakob Nielsen, recommend that Web developers

not change the default look of text links, this technique is often used. Most modern

browsers support CSS pseudo-classes. However, some visitors using mobile devices may

not have easy access to mouse-like controls, see section 7.6 for some tips on coding CSS

for mobile visitors.

WWW

Focus on Accessibility