Using Advanced Selectors - Beginning CSS3 - page 300

This is much more efficient than using a class to style the first paragraph after each heading. Not only does
it not require extra markup in the HTML, but the style is automatically transferred to the correct paragraph if you
insert a new one or remove an existing one.

Using the General Sibling Combinator
The general sibling combinator matches elements that are preceded by a specified element at the same level of
the HTML hierarchy. You create it by adding a tilde ( ~ ) between the two selectors. For example, the following
selector matches paragraphs that are preceded by an <h2> heading that is also a sibling:

h2 ~ p

The general sibling combinator differs from the adjacent sibling combinator in two important respects:

• The general sibling combinator targets all matching elements, not just the first.

• It doesn't matter if other elements are interposed between the elements specified in the

general sibling combinator. The intervening elements are skipped until the next match is
found.

The second point is particularly important because it can produce unexpected results. Let's say you want to
emphasize the text in paragraphs following an <h2> heading by converting them to uppercase, the following style
rule does the job:

h2 ~ p {
text-transform: uppercase;
}

However, adding this style rule to general-sibling1.html results in all sibling paragraphs that follow
an <h2> heading being converted to uppercase, as Figure 13-7 shows.

Figure 13-7. Even paragraphs that follow < h3 > headings are affected