The ~
combinator separates two selectors and matches the second element only if it is preceded by the first, and both are children of the same parent Element
.
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> <code>More code...</code> <span>And this is also red.</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 | 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
Tags:
Contributors to this page:
mfluehr,
Sheppy,
erikadoyle,
mikelew42,
cvrebert,
MusikAnimal,
Sebastianz,
DanSorahan,
SphinxKnight,
FredB,
teoli,
ethertank,
tiffon,
dhar,
Miken32
Last updated by:
mfluehr,