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
element ~ 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 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
Document Tags and Contributors
Tags:
Contributors to this page:
cvrebert,
MusikAnimal,
Sebastianz,
DanSorahan,
SphinxKnight,
FredB,
teoli,
Sheppy,
ethertank,
tiffon,
dhar,
Miken32
Last updated by:
cvrebert,