More on Links, Lists, and Layout - Web Development and Design Foundations with XHTML - page 276

7.2 CSS 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-class configures the appearance
of the hyperlink before it is clicked. The visited pseudo-class configures the appearance
of the hyperlink after it is clicked. The focus pseudo-class configures 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-class configures
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.

Focus on Accessibility

WWW

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.1 Commonly 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-class to 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.