The next-sibling combinator (+) matches the second element only if it immediately follows the first element, and both share the same parent.
MDN also calls it the adjacent sibling combinator. Use it for patterns like “the paragraph right after a heading” or “the next list item.”
+ styles one following element. If anything sits between the two tags in the HTML, the match fails. For all following siblings, use ~.
:has()+ only looks forward. To style the element before another, use :has(+ …).
former + target { … }Whitespace around + is optional but recommended. Example: h2 + p.
+Write the “before” selector, then +, then the element you want to style.
former + target { … }.~.| Piece | Required? | Role |
|---|---|---|
| Former selector | Yes | The sibling that comes first |
+ | Yes | Requires an immediate next sibling |
| Target selector | Yes | The element that receives the styles |
| Same parent | Yes | Both must be siblings in the DOM |
Only the paragraph that sits right after the heading is bold and blue—via h2 + p. The later paragraph is a sibling too, but not adjacent, so it stays normal.
Each snippet focuses on the + combinator. Use Try It Yourself for a live editor.
Style only the first paragraph under a heading.
h2 + p {
color: #1d4ed8;
font-weight: bold;
}h2 is the sibling that comes first.+. Require an immediate next sibling.p gets bold blue text.p is not adjacent, so it stays unchanged.Highlight the item that follows the first list item (MDN pattern).
li:first-of-type + li {
color: red;
font-weight: bold;
}li. :first-of-type marks item One.+ points at the following li.+ vs ~See how many following paragraphs each combinator styles.
.demo-plus h2 + p {
background: #dbeafe;
}
.demo-tilde h2 ~ p {
background: #bbf7d0;
}+. Only the first p after the heading matches.~. Every following p sibling matches.+; all later siblings → ~.Most misses come from HTML structure, not from the + itself.
A comment, text node that becomes an element, or another tag between the two siblings means + will not match.
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.
~~ keeps matching later siblings. Reach for it when one next sibling is not enough.
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: only the immediate next sibling matches; use ~ or :has(+ …) for other cases.
former + target under the same parent.~: one next sibling vs all following siblings.:has(+ …), not with bare +.One line: A + B styles B only when it is the next sibling of A.
Learn how to style every following sibling with the ~ combinator.
8 people found this page helpful