Selectors - Selectors, Specificity, and the Cascade - page 30

The selector translates as, “Selects any ul element that immediately follows a sibling
table element that is descended from a body element that is itself a child of an html
element.”
As with all combinators, you can place the adjacent-sibling combinator in a more com-
plex setting, such as div#content h1 + div ol . That selector is read as, “Selects any
ol element that is descended from a div when the div is the adjacent sibling of an h1
which is itself descended from a div whose id attribute has a value of content .”
Selecting Following Siblings
Selectors Level 3 introduced a new sibling combinator called the general sibling com-
binator . This lets you select any element that follows another element when both ele-
ments share the same parent, represented using the tilde ( ~ ) combinator.
As an example, to italicize any ol that follows an h2 and also shares a parent with the
h2 , you'd write h2 ~ ol {font-style: italic;} . The two elements do not have to be
adjacent siblings, although they can be adjacent and still match this rule. The result of
applying this rule to the following markup is shown in Figure 1-22 .
<div>
<h2>Subheadings</h2>
<p>It is the case that not every heading can be a main heading. Some headings must be
subheadings. Examples include:</p>
<ol>
<li>Headings that are less important</li>
<li>Headings that are subsidiary to more important headlines</li>
<li>Headings that like to be dominated</li>
</ol>
<p>Let's restate that for the record:</p>
<ol>
<li>Headings that are less important</li>
<li>Headings that are subsidiary to more important headlines</li>
<li>Headings that like to be dominated</li>
</ol>
</div>
Figure 1-22. Selecting following siblings