W3cubDocs

/CSS

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>
<span>And yet again this is a red span!</span>

Result

Specifications

Specification
Selectors Level 4 # general-sibling-combinators

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