Skip to: content, navigation

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:
#2
Contributed:
by MatthewHSE
Date:
Wed, 04 Mar 2009 01:52:20 GMT

Seconding rushy2uk's comment - I doubt this will throw many people off, but it should be corrected for the sake of accuracy.

ID:
#1
Contributed:
by rushy2uk
Date:
Wed, 28 Jan 2009 09:22:00 GMT

"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:"

This should be "Only the second paragraph BELOW is matched..." as the example is below.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search