MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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.

Syntax

former_element ~ target_element { style properties }

Example

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>

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 1.0 (1.7 or earlier) 7 9 3
Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

See also

Document Tags and Contributors

 Last updated by: mfluehr,