Using Advanced Selectors - Beginning CSS3 - page 299

The descendant and child combinators are very similar. The essential difference is that the child combinator
selects only direct children, whereas the descendant combinator picks descendants nested at any level.
So, #wrapper p selects paragraphs nested at any level inside an element with the ID wrapper , but #wrapper > p
selects only paragraphs that are direct children. These combinators were covered in Chapters 2 and 11
respectively, so they don't need further explanation.

Using the Adjacent Sibling Combinator
The adjacent sibling combinator matches an element immediately preceded by a sibling of the specified type. To
create an adjacent sibling combinator, add a plus sign ( + ) between the two selectors. For example, the following
selector applies styles to every paragraph that is immediately preceded by an <h3> heading:

h3 + p

The styles in adjacent-sibling.html indent the first line of each paragraph, but the adjacent sibling
combinator removes the indent from paragraphs that immediately follow an <h3> heading like this:

p {
margin: 0;
text-indent: 2.5em;
width: 650px;
}

h3 {
margin-bottom: 0.25em;
}
h3 + p {
text-indent: 0;
}

As Figure 13-6 shows, the first line of the first paragraph after each heading is flush with the left margin, but
other paragraphs are indented.

Figure 13-6. The adjacent sibling combinator affects only the first paragraph after each heading