HTML and CSS Reference
In-Depth Information
The first of the pseudo-classes in Table 1-2 may seem a bit redundant. After all, if an
anchor hasn't been visited, then it must be unvisited, right? If that's the case, all we
should need is the following:
a {color: blue;}
a:visited {color: red;}
Although this format seems reasonable, it's actually not quite enough. The first of the
rules shown here applies not only to unvisited links, but also to target anchors such as
this one:
<a name="section4">4. The Lives of Meerkats</a>
The resulting text would be blue because the a element will match the rule a {color :
blue;} , as shown above. Therefore, to avoid applying your link styles to target anchors,
use the :link and :visited pseudo-classes:
a:link {color: blue;} /* unvisited links are blue */
a:visited {color: red;} /* visited links are red */
As you may or may not have already realized, the :link and :visited pseudo-class
selectors are functionally equivalent to the early-1990s body attributes link and vlink .
Assume that an author wants all anchors to unvisited pages to be purple and anchors
to visited pages to be silver. Back in the days of HTML 3.2, this could be specified as
follows:
<body link="purple" vlink="silver">
In CSS, the same effect would be accomplished with:
a:link {color: purple;}
a:visited {color: silver;}
This is a good place to revisit class selectors and show how they can be combined with
pseudo-classes. For example, let's say you want to change the color of links that point
outside your own site. If you assign a class to each of these anchors, it's easy:
<a href="http://www.mysite.net/">My home page</a>
<a href="http://www.site.net/" class="external">Another home page</a>
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 rule will make the second anchor in the preceding markup maroon, while the first
anchor will remain the default color for hyperlinks (usually blue).
The same general syntax is used for ID selectors as well:
a#footer-copyright:link{background: yellow;}
a#footer-copyright:visited {background: gray;}
You can chain the two link-state pseudo-classes together, but there's no reason why
you ever would: a link cannot be both visited and unvisited at the same time!
 
Search WWH ::




Custom Search