Description

The general sibling selector is available in CSS3, and the combinator used in this selector is a tilde character (~).

The selector matches elements that are siblings of a given element. This example will match a p element if it’s a sibling of an h2 element:

h2~p {
  ⋮ declarations
}

The elements don’t have to be adjacent siblings, but they have to have the same parent, and the h2 element has to occur before the p element in the document source. Let’s apply the above selector to some more examples:

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above matches this paragraph.</p>

Here, both paragraphs match the sibling selector h2~p, because the p elements are siblings to the h2 element.

The paragraph below isn’t a sibling to the heading—they don’t have the same parent—so our selector won’t match this paragraph:

<h2>Heading</h2>
<div>
  <p>The selector above does not match this paragraph.</p>
</div>

Only the second paragraph above is matched by the sibling selector h2~p—even though they’re siblings—because the first p element occurs before the h2 element:

<p>The selector above does not match this paragraph.</p>
<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>