HTML and CSS Reference
In-Depth Information
3. Sibling combinators
There are two types of sibling combinators: adjacent sibling combinators
and general sibling combinators.
ADJACENT SIBLING COMBINATOR
This selector uses the plus sign, “ + ”, to combine two sequences of simple
selectors. The elements in the selector have the same parent, and the
second one must come immediately after the first.
The adjacent sibling combinator can be very useful, for example, when
dealing with text. Lets say you want to add a top margin to all the h2 tags
that follow a paragraph (you don't need to add a top margin if the heading
comes after an h1 tag or if it's the first element on that page):
p + h2 {
margin-top: 10px;
}
You can be even more specific and say that you only want this rule applied if
the elements are within a particular div :
div.post p + h2 {
margin-top: 10px;
}
Or you can add another level of complexity: say you want the first line of the
paragraphs of every page to be in small caps.
.post h1 + p:first-line {
font-variant: small-caps;
}
Search WWH ::




Custom Search