Web Foundations
Article
By Adam Roberts

General Sibling Selector (CSS selector)

By Adam Roberts

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
}

No Reader comments