The CSS ~ selector
The CSS general sibling combinator, ~, selects every matching sibling that comes after an element and shares its parent — h2 ~ p styles all paragraphs that follow an <h2>, not just the next one. It is the looser counterpart of the adjacent sibling +.
Overview
The general sibling combinator, a tilde, matches all later siblings, not only the immediate one. h2 ~ p selects every paragraph that appears after an <h2> within the same parent — however many elements sit in between.
It is the wider-reaching version of the adjacent sibling combinator (+), which stops at the very next element. Use ~ when an element should influence everything that comes after it — a common pattern is pairing it with :checked so a single toggle can restyle several later elements at once, all without JavaScript.
As with the other sibling combinators, the elements must share a parent, and it only ever looks forward — there is no built-in way to select earlier siblings.
Syntax
/* every paragraph after an h2 */
h2 ~ p {
color: #475569;
}
/* a toggle that affects many later siblings */
#toggle:checked ~ .panel { display: block; }Example
<style>
.list span { display: inline-block; padding: 8px 12px; border-radius: 6px; background: #e2e8f0; font: 600 13px system-ui, sans-serif; margin: 2px; }
.pivot ~ span { background: #1c7ce9; color: #fff; }
</style>
<div class="list">
<span>1</span>
<span class="pivot">2 (pivot)</span>
<span>3</span>
<span>4</span>
</div>Best practices
- Use
~when an element should affect all of its later siblings, not just the next one. - Pair it with :checked for CSS-only toggles that restyle several elements at once.
- Reach for + instead when you only want the immediately following sibling.
- It selects forward only and requires a shared parent — there is no previous-sibling combinator.
Frequently asked questions
What does the ~ selector do in CSS?
h2 ~ p styles every paragraph after an <h2> in the same parent.What is the difference between ~ and + in CSS?
~ matches every later sibling.