Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 156

Descendant Selectors
Styles of elements that are lower on the DOM tree can be provided by descendant selectors that use the element names
separated by spaces. In contrast to child selectors, descendant selectors do not require the child element to be a direct
child of the ancestor. Listing 5-27 shows an example.

Listing 5-27. Descendant Selector Example
td a {
font-weight: bold;
}

This is applied to all hyperlinks within table data cells, for example to Listing 5-25 (similar to the child selector
shown previously) or Listing 5-28. This rule does not affect hyperlinks in general, however.

Listing 5-28. An Anchor Example Where Listing 5-27 Is Applied

<td><p> The textbook <a href=" http://www.masteringhtml5css3.com " > Web Standards </a> is a comprehensive
guide to current and future standards for the World Wide Web. </p></td>

Note the difference between the child selector and the descendant selector.

Adjacent Sibling Selectors
Adjacent sibling selectors select the element on the right-hand side of the selector if and only if it has an instance of the
element on the left-hand side next to it. The + sign is applied as the combinator. Sibling elements are on the same level
within the DOM hierarchy. Listing 5-29 shows an example.

Listing 5-29. Adjacent Sibling Selector Example
h2 + p {
color: #0f0;
}

This selector applies to Listing 5-30, but neither to Listing 5-31 nor Listing 5-32.

Listing 5-30. Elements That Apply the Green Color from Listing 5-29

Heading </h2>
<p> A paragraph </p>

Listing 5-31. A Paragraph That Does Not Apply the Rule Shown in Listing 5-29
<p> A paragraph </p>

Listing 5-32. Because of the Missing Level 2 Heading Preceding the Paragraph, the Style Is Not Applied Here Either

Heading </h1>
<p> A paragraph </p>

■ Caution adjacent sibling selectors are not supported in Ie6 or earlier.