The subsequent-sibling combinator (~) matches every element that follows another sibling, shares the same parent, and matches the second selector. Elements may sit between them.
MDN also calls it the general sibling combinator. Use it for patterns like “all paragraphs after a heading” or “every span after a paragraph.”
Long-supported CSS combinator. Safe for production layouts across modern browsers.
former ~ target { … }Whitespace around ~ is optional but recommended. Example: h2 ~ p.
| Pattern | Description | Try it |
|---|---|---|
h2 ~ p | Every p that follows an h2 sibling | Try it |
p ~ span | Every span after a p (gaps allowed) | Try it |
.note ~ p | Paragraphs that follow a .note sibling | Try it |
h2 + p (compare) | Only the immediate next p | Try it |
| same parent | Targets must share a parent with the former | Try it |
| gaps allowed | Other siblings between still match with ~ | Try it |
~Write the “before” selector, then ~, then the siblings you want to style.
former ~ target { … }.+.| Piece | Required? | Role |
|---|---|---|
| Former selector | Yes | The sibling that comes first |
~ | Yes | Selects all following matching siblings |
| Target selector | Yes | Elements that receive the styles |
| Same parent | Yes | Both must be siblings in the DOM |
Switch between ~ and + on the same markup. Watch how many following paragraphs light up.
Each snippet focuses on the ~ combinator. Use Try It Yourself for a live editor.
Style every following p, even when other siblings sit between.
h2 ~ p {
color: #15803d;
font-weight: bold;
}h2 comes first.~. Look forward through following siblings.p turns green and bold.~.p ~ spanMDN-style pattern: spans that follow a paragraph under the same parent.
p ~ span {
color: #b91c1c;
}p. The paragraph is the former sibling.spans. ~ finds every following span.code element between does not stop the match.~ vs +Same HTML, different combinators.
.demo-tilde h2 ~ p {
background: #bbf7d0;
}
.demo-plus h2 + p {
background: #dbeafe;
}~. Both paragraphs after the heading match.+. Only the immediate next paragraph matches.~; one next sibling → +.Most misses come from parent boundaries or looking the wrong direction.
Nested elements are not siblings. Use the child or descendant combinator for those.
p ~ h2 never styles a heading that comes before a paragraph. Use :has(~ …) to look backward.
++ stops at the immediate next sibling. Reach for it when one match is enough.
Unlike +, other siblings between the former and target do not break ~.
h2~p and h2 ~ p are both valid. Prefer spaces for reading.
The ~ combinator is a browser CSS selector. Node.js, Deno, and Bun do not evaluate it.
Supported in all major browsers for decades (Baseline Widely available since about July 2015). Safe for production layouts.
Bottom line: Production-ready. Remember: ~ matches all following siblings; use + for only the next one. Not a server runtime API.
former ~ target under the same parent.+: all following siblings vs only the next one.:has(~ …), not with bare ~.One line: A ~ B styles every following sibling B after A.
Learn how to select only direct children of a parent.
8 people found this page helpful