white background, and both areas include lists of links. You can't set all links to
be blue because they'd be impossible to read in the sidebar.
The solution: descendant selectors. In this case, you give the table cell that
contains your sidebar a class of
sidebar
, and
assign the main area a class of
main
. Then, you
write styles like this:
td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}
Figure 2-17 shows the result.
Figure 2-17. Using descendant selectors to apply different styles to the same type of
element
Tip
:link
refers to links to resources that haven't
been visited. We'll talk about it in detail later in this chapter.
Here's another example: let's say that you want gray to be the text color of any
b
(boldface) element that is part of a
blockquote
, and also for any bold text that is found in
a normal paragraph:
blockquote b, p b {color: gray;}
The result is that the text within
b
elements
that are descended from paragraphs or block quotes will be gray.
One overlooked aspect of descendant selectors is that the degree of separation
between two elements can be practically infinite. For example, if you write
ul em
, that syntax will select any
em
element descended from a
ul
element, no matter how deeply nested the
em
may be. Thus,
ul em
would select the
em
element in the following markup:
- List item 1
- List item 1-1
- List item 1-2
- List item 1-3
- List item 1-3-1
- List item 1-3-2
- List item 1-3-3
- List item 1-4
Selecting Children
In some cases, you don't want to select an
arbitrarily descended element; rather, you want to narrow your range to select an
element that is a child of another element. You might, for example, want to select a
strong
element only if it is a child (as
opposed to a descendant) of an
h1
element. To do
this, you use the child combinator,which is the
greater-than symbol (
>
):
h1 > strong {color: red;}
This rule will make red the
strong
element
shown in the first
h1
below, but not the second:
This is very important.
This is really very important.
Read right to left, the selector
h1 > strong
translates as "selects any
strong
element that is
a child of an
h1
element." The child combinator is
optionally surrounded by whitespace. Thus,
h1 > strong,
h1> strong
, and
h1>strong
are
all equivalent. You can use or omit whitespace as you wish.
When viewing the document as a tree structure, it's easy to see that a child
selector restricts its matches to elements that are directly connected in the tree. Figure 2-18 shows part of a document
tree.
Figure 2-18. A document tree fragment
In this tree fragment, you can easily pick out parent-child relationships. For
example, the
a
element is parent to the
strong
, but it is child to the
p
element. You could match elements in this fragment with the selectors
p > a
and
a >
strong
, but not
p > strong
, since
the
strong
is a descendant of the
p
but not its child.
You can also combine descendant and child combinations in the same selector. Thus,
table.summary td > p
will select any
p
element that is a child of a
td
element that is itself descended from a
table
element that has a
class
attribute containing the word
summary
.
Selecting Adjacent Sibling Elements
Let's say you want to style the paragraph
immediately after a heading or give a special margin to a list that immediately
follows a paragraph. To select an element that immediately follows another element
with the same parent, you use the adjacent-sibling
combinator ,represented as a plus symbol (
+
). As with the
child combinator, the symbol can be surrounded by whitespace at the author's
discretion.
To remove the top margin from a paragraph immediately following an
h1
element, write:
h1 + p