General sibling combinator
The general sibling combinator (~
) separates two selectors and matches all iterations of the second element, that are following the first element (though not necessarily immediately), and 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> <span>And this is a red span!</span> <code>More code...</code> <div> How are you? </div> <p> Whatever it may be, keep smiling. </p> <h1> Dream big </h1> <h2> that's all. </h2> <span>And yet again this is a red span!</span>
Result
Specifications
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
General_sibling_combinator |
1 |
12 |
1 |
7
Before Internet Explorer 10, the combinator only works in standards mode.
|
9 |
3 |
≤37 |
18 |
4 |
14 |
1 |
1.0 |
See also
© 2005–2021 MDN 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