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 }
Examples
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 compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
General sibling combinator (A ~ B ) | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 7 | Opera Full support 9 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support