HTML and CSS Reference
In-Depth Information
“But,” you ask, “what is that extra code in the selector after the colon?” The
:link
portion of the selector is
what's referred to in CSS as a
pseudo-class
, which we introduced in Chapter 2. Pseudo-classes are the
mechanism by which we style various states of certain HTML elements. Anchor elements just happen to
be one of those HTML elements with multiple states. Next, we'll guide you through each of the anchor
element's pseudo-classes.
Keeping it pseudo-classy
Visited links—anchors that you've previously clicked on in your browser—are generally colored purple (see
Figure 6-4). Your web browser will apply visited styling to links by drawing from its own stored history. If,
like us, you've ever tried to re-find a page you'd browsed to days or weeks ago, you know how helpful the
visited link state can be.
Figure 6-4.
Browser output of the default styling of the visited state of an anchor element
The links in Figure 6-4 have no additional styling applied. As such, non-visited links render as blue,
underlined text and visited links (“Utility Belts” in this example) render as purple, underlined text. If you're
enjoying this example in the printed version of this topic, odds are Figure 6-4 appears in various shades of
gray. You'll have to trust us that the “Utility Belts” link is purple!
To style the visited state of a link, use the
:visited
pseudo-class, as shown in Listing 6-21.
Listing 6-21.
CSS for styling the visited state of an anchor element
a:link {
color: #cc0000;
font-weight: bold;
text-decoration: underline;
}
a:visited {
color: #00cc00;
}
In Listing 6-21, the
a:visited
selector instructs the browser to style visited links bright green. The visited
link state inherits the
font-weight
and
text-decoration
properties from the
a:link
declaration. Figure
6-5 shows this CSS in action.
