CSS: The Definitive Guide, 3rd Edition (8 page)

Figure 2-19. Another document tree fragment

Figure 2-20. Selecting adjacent siblings

Internet Explorer for Windows through IE6 does not support child and
adjacent-sibling selectors. IE7 supports both.

CSS2.1 defines two pseudo-classes that apply
only to hyperlinks.
In HTML and
XHTML 1.0 and 1.1, these are any
a
elements
with an
href
attribute; in XML languages,
they're any elements that act as links to another resource.
Table 2-2
describes these two
pseudo-classes.

The first of the pseudo-classes in
Table 2-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:

4. The Lives of Meerkats

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
pseudo-class:

a:link {color: blue;}    /* unvisited links are blue */
a:visited {color: red;}   /* visited links are red */

As
you may have already realized, the
:link
and
:visited
pseudo-class selectors are
functionally equivalent to the
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. In HTML 3.2, this could be
specified as
follows:

In
CSS, the same effect would be accomplished
with:

a:link {color: purple;}
a:visited {color: silver;}

In
the case of the CSS pseudo-classes, of course, you can apply more than just
colors. Let's say you want visited links to be italicized and to have, in addition
to their silver color, a strikethrough line, as shown in
Figure 2-21
.

Figure 2-21. Applying multiple styles to a visited link

This is simply done with the following
styles:

a:visited {color: silver; text-decoration: line-through; font-style: italic;}

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:

My home page
Another home page

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{font-weight: bold;}
a#footer-copyright:visited {font-weight: normal;}

Although
:link
and
:visited
are very useful, they're also static—they typically don't
change the styling of a document after its initial display. Other pseudo-classes
that aren't quite so static are available in CSS2.1; we'll review them
next.

CSS2.1 defines three pseudo-classes
that can change a document's appearance as a result of user behavior. These
dynamic pseudo-classes
have traditionally been used to style
hyperlinks, but the possibilities are much wider.
Table 2-3
describes these
pseudo-classes.

As with
:link
and
:visited
, these pseudo-classes are most familiar in
the context of hyperlinks. Many web pages have styles that look like
this:

a:link {color: navy;}
a:visited {color: gray;}
a:hover {color: red;}
a:active {color: yellow;}

The
first two rules use static pseudo-classes, and the last two employ dynamic
pseudo-classes.
:active
is analogous to the
alink
attribute in HTML 3.2, although, as
before, you can apply color changes and any style you like to active
links.

Notice that the dynamic pseudo-classes can be applied to any element,
which is good since it's often useful to apply dynamic styles to elements that
aren't links. For example, using this
markup:

input:focus {background: silver; font-weight: bold;}

you
could highlight a form element that is ready to accept keyboard input, as shown in
Figure 2-22
.

Figure 2-22. Highlighting a form element that has focus

You can also perform some rather odd feats by applying dynamic
pseudo-classes to arbitrary elements. You might decide to give users a "highlight"
effect by way of the
following:

body *:hover {background: yellow;}

This
rule will cause any element that's descended from the
body
element to display a yellow background when it's in a hover
state. Headings, paragraphs, lists, tables, images, and anything else found inside
the
body
will be changed to have a yellow
background. You could also change the font, put a border around the element being
hovered, or alter anything else the browser will allow.

Dynamic
pseudo-classes present some interesting issues and peculiarities. For example,
it's possible to set visited and unvisited links to one font size and make hovered
links a larger size, as shown in
Figure
2-23
:

a:link, a:visited {font-size: 13px;}
a:hover {font-size: 20px;}

Figure 2-23. Changing layout with dynamic pseudo-classes

As you can see, the user agent increases the size of the anchor while
the mouse pointer hovers over it. A user agent that supports this behavior must
redraw the document while an anchor is in hover state, which could force a reflow
of all the content that follows the link.

However, the CSS
specifications state that user agents are not required to redraw a document once
it's been rendered for initial display, so you can't absolutely rely on your
intended effect taking place. I strongly recommend that you avoid designs that
depend on such behavior.