General Sibling Selector (CSS selector)

Spec
Version
CSS3
Browser support (more…)
IE7+ FF1+ SA3.1+ OP9.2+ CH2+
Buggy Full Full Full Full

Syntax

E~F {
declaration block
}

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>

Example

This selector matches all p elements that are siblings to h2 elements:

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).

User-contributed notes

ID:
#3
Contributed:
by roger_willian
Date:
Tue, 23 Feb 2010 18:31:19 GMT

I think this selector has the same issue as the adjacent sibling selector (+) in chrome.
Because the folowing statement does not work properly.
a:hover + a + a{
color: red;
}

Related Products