HTML and CSS Reference
In-Depth Information
The complete listing is available in ch07/sibling-
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
The target element is always listed last. This
rule has no effect because there are no para-
graph elements immediately after footer ele-
footer + p {
background-color: #000;
Switch the two simple selectors around, and you
can see that there are footers that follow para-
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.
Search WWH ::

Custom Search