The Subsequent-Sibling Combinator
The next-sibling combinator reaches exactly one element. Sometimes you want every element that follows, such as every card after a section heading, however many cards the menu grows to. The tilde does that.
The rule
~means "any later sibling": same parent, anywhere after.
A ~ B matches every B that comes somewhere after an A and shares its parent. It does not have to be immediately after.
<main>
<section id="menu">
<h2>Today's menu</h2>
<article class="dish">
<h3>Masala omelette</h3>
<p class="price">₹180</p>
<p>Three eggs, green chilli and coriander.</p>
</article>
<article class="dish special">
<h3>Mango lassi</h3>
<p class="price">₹120</p>
<p>Thick, cold and only in summer.</p>
</article>
</section>
<section id="visit">
<h2>Visit us</h2>
<p>Open 8 am to 6 pm, every day.</p>
</section>
</main>h2 ~ article {
margin-top: 1.5rem;
}h2 ~ article matches both cards, because each comes after the menu's h2 in the same section. Compare with h2 + article, which reaches only the first.
More readings:
h3 ~ pmatches all four card paragraphs: in each card, both paragraphs come after theh3..price ~ pmatches the two descriptions..special ~ articlematches nothing: the lassi's card is the last article, and~never looks backwards.h2 ~ pmatches only the opening hours. The card paragraphs are inside articles, so they are not siblings of theh2.
Specificity, as with every combinator, only counts the selectors: h2 ~ article is (0,0,2).
Here are all four combinators side by side, for an A and a B:
| Written | Reads as | Relationship |
|---|---|---|
A B |
B anywhere inside A | descendant |
A > B |
B directly inside A | child |
A + B |
B right after A | next sibling |
A ~ B |
B somewhere after A | subsequent sibling |
The shortcut
Stand on the left-side element and look forward along its row. Everything after it with the same parent is a candidate; keep the ones that match the right side. Nothing behind you, and nothing inside other elements, counts.
Stand on each left match
The omelette card and the lassi card are both
.dish.
Drills
Answer fast — trust the rule.
How many elements does h2 ~ article match?
How many elements does h3 ~ p match?
Which elements does .special ~ article match?
Which selector matches both dish descriptions and nothing else?
How many elements does h2 ~ p match?
Remember
~selects every later sibling that matches, not just the next one.- Stand on the left element and look forward along its row only.
- Four combinators: space inside,
>child,+next,~any later.