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
  
  
  
  1. List item 1-1
  
  
  2. List item 1-2
  
  
  3. List item 1-3
     
     
     
     1. List item 1-3-1
     
     
     2. List item 1-3-2
     
     
     3. List item 1-3-3
     
     
  
  
  4. 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