W3cubDocs

/CSS

General sibling combinator

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

/* Paragraphs that are siblings of and
   subsequent to any image */
img ~ p {
  color: red;
}

Syntax

former_element ~ target_element { style properties }

Example

CSS

p ~ span {
  color: red;
}

HTML

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of 'subsequent-sibling combinator' in that specification.
Working Draft Renames it the "subsequent-sibling" combinator.
Selectors Level 3
The definition of 'general sibling combinator' in that specification.
Recommendation Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 12 1 7 9 3
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes 4 Yes Yes Yes

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator