The CSS + selector
The CSS adjacent sibling combinator, +, selects the element that comes immediately after another with the same parent — h2 + p styles the paragraph directly following each <h2>. It is great for spacing between specific siblings and for reacting to the element next to a checked input.
Overview
The adjacent sibling combinator, a plus sign, matches an element that immediately follows another and shares the same parent. h2 + p selects only the first paragraph right after each heading — not every paragraph, just the next one.
It shines for contextual spacing: p + p { margin-top: 1em; } adds a gap between consecutive paragraphs without putting a stray margin on the first one. It is also the engine behind classic CSS-only interactions — pair it with :checked and a label, like input:checked + label, to restyle the thing next to a toggled checkbox with no JavaScript.
If you need to reach any later sibling rather than just the very next one, that is the job of its looser cousin, the general sibling combinator (~).
Syntax
/* the paragraph right after an h2 */
h2 + p {
margin-top: 0;
}
/* space between consecutive paragraphs */
p + p {
margin-top: 1em;
}Example
<style>
.article h3 { margin: 0; font: 700 17px system-ui, sans-serif; }
.article h3 + p { margin-top: 4px; color: #1c7ce9; font: 15px system-ui, sans-serif; }
.article p + p { margin-top: 12px; font: 15px system-ui, sans-serif; }
</style>
<div class="article">
<h3>Heading</h3>
<p>This paragraph follows the heading (blue).</p>
<p>This one follows a paragraph (spaced above).</p>
</div>Best practices
- Use
p + p-style rules for spacing between siblings without a leftover margin on the first one. - Combine it with :checked (
input:checked + label) for CSS-only toggles and reveals. - Remember it only matches the immediately following sibling — reach for ~ for any later sibling.
- Both elements must share the same parent for the match to apply.
Frequently asked questions
What does the + selector do in CSS?
h2 + p matches the paragraph right after each <h2>.How do I add space between paragraphs but not before the first?
p + p { margin-top: 1em; }. The space is only added between consecutive paragraphs, so the first one stays flush.What is the difference between + and ~ in CSS?
+ matches only the immediately next sibling; ~ matches any later sibling with the same parent.Can I style an element based on a checkbox with +?
input:checked + label styles the label right after a checked input, the basis of many CSS-only toggles.