HTML and CSS Reference
In-Depth Information
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 im-
mediately 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, or not, at the author's discretion.
To remove the top margin from a paragraph immediately following an h1 element,
h1 + p {margin-top: 0;}
The selector is read as, “Selects any p element that immediately follows an h1 element
that shares a parent with the p element.”
To visualize how this selector works, it is easiest to once again consider a fragment of
a document tree, shown in Figure 1-20 .
Figure 1-20. Another document tree fragment
In this fragment, a pair of lists descends from a div element, one ordered and the other
not, each containing three list items. Each list is an adjacent sibling, and the list items
themselves are also adjacent siblings. However, the list items from the first list are
not siblings of the second, since the two sets of list items do not share the same parent
element. (At best, they're cousins, and CSS has no cousin selector.)
Search WWH ::

Custom Search