New CSS language features - HTML5 and CSS3 - page 238

THE GENERAL-SIBLING COMBINATOR

Suppose another element is inserted
between the paragraph and the footer, like
this:

<p>Paragraph 2</p>
<img src="example.png">
<footer>Article footer</footer>

The footer is no longer selected by p +
footer because it doesn't immediately follow
the paragraph.

For situations where the elements you want to select will share
the same parent as another element, but not necessarily be
directly adjacent, CSS3 offers the general — sibling combinator.

Adjacent sibling
combinator

-

h1 + p {

background-color:#000;

}

Selects <p> ELEMENTS
that DIRECTLY FOLLOW

Selects aNY <p>
ELEMENT that FOLLOWS
AN <h1> ELEMENT WITH
THE SAME PARENT

General sibling

-

combinator

h1 ~ p {
background-color: #000;
}