General sibling selectors

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>
<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

See also

• Adjacent sibling selectors