HTML and CSS Reference
In-Depth Information
Remember that you can select the second of two adjacent siblings only with a single
combinator. Thus, if you write
li + li {font-weight
:
bold;}
, only the second and third
items in each list will be boldfaced. The first list items will be unaffected, as illustrated
in
Figure 1-21
.
Figure 1-21. Selecting adjacent siblings
To work properly, CSS requires that the two elements appear in “source order.” In our
example, an
ol
element is followed by a
ul
element. This allows you to select the second
element with
ol + ul
, but you cannot select the first using the same syntax. For
ul +
ol
to match, an ordered list must immediately follow an unordered list.
Keep in mind that text content between two elements does
not
prevent the adjacent-
sibling combinator from working. Consider this markup fragment, whose tree view
would be the same as that shown in
Figure 1-19
:
<div>
<ol>
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
</ol>
This is some text that is part of the 'div'.
<ul>
<li>A list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
</ul>
</div>
Even though there is text between the two lists, you can still match the second list with
the selector
ol + ul
. That's because the intervening text is not contained with a sibling
element, but is instead part of the parent
div
. If you wrapped that text in a paragraph
element, it would then prevent
ol + ul
from matching the second list. Instead, you
might have to write something like
ol + p + ul
.
As the following example illustrates, the adjacent-sibling combinator can be used in
conjunction with other combinators:
html > body table + ul{margin-top: 1.5em;}
