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 below 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>

h2~p {
  ⋮ declarations
}

Compatibility

Internet Explorer				Firefox					Safari				Opera			Chrome
5.5	6.0	7.0	8.0	1.0	1.5	2.0	3.0	3.5	1.3	2.0	3.1	4.0	9.2	9.5	10.0	2.0
None	None	Buggy	Buggy	Full	Full	Full	Full	Full	None	None	Full	Full	Full	Full	Full	Full

In Internet Explorer 7, this selector fails if a comment appears between the combinator and the simple selector that follows it.

in Internet Explorer version 8 this selector only matches the first 298 elements in range (Bug documented at Microsoft Connect).