HTML and CSS Reference
In-Depth Information
The complete listing is available in ch07/sibling-
combinator-1.html.
This rule selects any paragraph elements that
immediately follow a level-one heading element:
h1 + p { background-color: #000; }
You can see in the screenshot that only the first
paragraph is selected. The
+
is known as the
adjacent-sibling combinator
. This example is from
ch07/sibling-combinator-1a.html.
The target element is always listed last. This
rule has no effect because there are no para-
graph elements immediately after footer ele-
ments:
footer + p {
background-color: #000;
}
Switch the two simple selectors around, and you
can see that there are footers that follow para-
graphs:
p + footer {
background-color: #000;
}
See the files sibling-combinator2a.html and sibling-combinator2b.html
in the ch07 folder for these two examples.
The adjacenT
—
sibling combinator is useful for situations where you might
want to allow a different amount of space depending on what the previous
element was. For example, if you have a heading directly after a paragraph, you
want two lines of space. A heading that follows another heading needs only
one line of space, but the elements have to directly follow one another.
