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; }
former_element ~ target_element { style properties }
p ~ span { color: red; }
<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>
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. |
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 |
© 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