A + B
The + sign selects element B that sits directly after element A and shares the same parent.
Example
#h3 + p {
font-size: 17px;
color: #fff;
}<style>
:where(article) h3 { margin: 0 0 6px; }
:where(article) p { margin: 0 0 6px; color: #a1a1aa; }
</style>
<article class="stage">
<h3>Selectors in practice</h3>
<p>The first paragraph after the heading is bigger and brighter.</p>
<p>The following paragraphs look ordinary, because they don’t sit right after the heading.</p>
</article>Definition and usage
#The next-sibling combinator, also called the adjacent sibling combinator, links two elements that sit right next to each other. The notation h2 + p hits the paragraph that comes right after an h2 heading, but not the paragraphs that follow it, and not a paragraph separated by another element.
Both elements must share the same parent, and B must come after A, never before it. Text and comments between them don’t count, only elements do.
Typical uses include highlighting the first paragraph after a heading, spacing between adjacent elements (li + li), and reacting to a form field’s state: input:checked + label changes the label that sits right after a checked field.
CSS has no separate previous-sibling combinator. When you want to style an element that comes before another one, use :has(): h2:has(+ p) selects a heading that’s followed by a paragraph.
Syntax
#A + B { property: value; }Example selectors
#- Only the element right after
.start. The 4 no longer matches. - Every
spanthat’s directly preceded by anotherspan. The 6 drops out, because its predecessor is anem. - Combinators chain together: here, the second element after
.start. - Every child of the box that has a predecessor. Only the first element stays gray, which is why this pattern is used for spacing between elements.
Example selectors in practice
#.start + span
.start. The 4 no longer matches..start + span { background: #7c3aed; color: #fff; }span + span
span that’s directly preceded by another span. The 6 drops out, because its predecessor is an em.span + span { background: #7c3aed; color: #fff; }.start + span + span
.start..start + span + span { background: #7c3aed; color: #fff; }.demo > * + *
.demo > * + * { background: #7c3aed; color: #fff; }More examples
#.option input:checked + label {
border-color: #a78bfa;
background: rgb(124 58 237 / 0.2);
color: #fff;
}<style>
.option { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.option label { flex: 1; padding: 8px 12px; border: 2px solid #3f3f46; border-radius: 10px; color: #a1a1aa; cursor: pointer; }
</style>
<div class="option"><input type="radio" name="plan" id="plan-1" checked><label for="plan-1">Monthly plan</label></div>
<div class="option"><input type="radio" name="plan" id="plan-2"><label for="plan-2">Annual plan</label></div>Click the second option. The style moves to the label that sits right after the checked field.
Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For spacing between list items,
li + li { margin-top: 8px; }is enough: the first item won’t get an unnecessary margin. In flex and grid containers,gapis simpler. - Keep the HTML order for form fields:
inputfirst, thenlabel. The combinator only works forward. - You can select the previous sibling with
:has(), for examplelabel:has(+ input:invalid)is a label that comes before an invalid field.
Related entries
#- A ~ BThe ~ sign selects every B element that comes anywhere after element A and shares the same parent.
- A > BThe > sign selects B elements that are direct children of element A, meaning they sit exactly one level below it.
- A BA space between selectors selects B elements anywhere inside element A, at any depth.
- :has()Selects an element based on what it contains or what follows it. Lets you style a parent according to its children.
- :checkedMatches a checked checkbox, a selected radio button, and a selected option in a select list.
- *The asterisk matches every element. Used for style resets and rules that target all the children of a chosen container.
Spotted a mistake or missing an example? Write to us.