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 :
<li>List item 1</li>
<li>List item 1</li>
<li>List item 1</li>
This is some text that is part of the 'div'.
<li>A list item</li>
<li>Another list item</li>
<li>Yet another list item</li>
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;}
Search WWH ::

Custom Search