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 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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 1 | 7 | 9 | 3 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | Yes | Yes | Yes | 4 | Yes | Yes | Yes |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
mfluehr,
wbamberg,
Sheppy,
erikadoyle,
mikelew42,
cvrebert,
MusikAnimal,
Sebastianz,
DanSorahan,
SphinxKnight,
FredB,
teoli,
ethertank,
tiffon,
dhar,
miken32
Last updated by:
fscholz,