General sibling selectors

Summary

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

Syntax

CSS
element ~ 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 span.</span>

Specifications

Specification Status Comment
Selectors Level 4
The definition of 'following-sibling combinator' in that specification.
Working Draft  
Selectors Level 3
The definition of 'general sibling combinator' in that specification.
Recommendation  

Browser compatibility

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

See also

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/general_sibling_selectors

Beginner CSS CSS Reference NeedsMobileBrowserCompatibility Selectors