CSS Next-Sibling Combinator

The CSS next-sibling combinator selects an element that immediately follows another sibling element. It is represented by the plus sign (+) between two selectors. The two elements must have the same parent, and the selected element must be the next sibling after the first element.

Syntax

The next-sibling combinator uses the plus sign (+) between two selectors:

previous + next {
  property: value;
}

For example, the following selector matches a <p> element when it immediately follows an <h2> element:

h2 + p {
  color: #0088cc;
}

How the Next-Sibling Combinator Works

The selector on the right must match the element immediately following an element matched by the selector on the left. Both elements must share the same parent.

h2 + p {
  color: #0088cc;
}

This selector matches the first <p> element immediately following an <h2>. Additional paragraphs that follow the first paragraph do not match unless they also immediately follow an <h2>.

Sibling Relationships

Sibling elements share the same parent. The next-sibling combinator only matches the sibling immediately after the first selected element.

<section>
  <h2>Heading</h2>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</section>

The selector h2 + p matches the first paragraph because it is the next sibling immediately following the <h2>. The second paragraph does not match because another <p> occurs between it and the heading.

Next-Sibling vs. Subsequent-Sibling Combinator

The next-sibling and subsequent-sibling combinators both select siblings that occur after another element, but they differ in how many following siblings can match.

Selector	Matches
`h2 + p`	A `<p>` only when it is the next sibling immediately following an `<h2>`.
`h2 ~ p`	Every matching `<p>` sibling that occurs after an `<h2>` and shares the same parent.

Use the next-sibling combinator when only the immediately following sibling should match. Use the subsequent-sibling combinator when multiple later siblings may match.

Combining with Other Selectors

The next-sibling combinator can connect type, class, ID, attribute, pseudo-class, and other selectors.

.title + .summary {
  color: #0088cc;
}
#notice + p {
  font-weight: 600;
}
input[required] + label {
  color: #0088cc;
}

It can also be combined with other combinators to describe more detailed relationships within the document structure.

article > h2 + p {
  color: #0088cc;
}

This selector matches a <p> immediately following an <h2> when that <h2> is a direct child of an <article>.

Specificity

The next-sibling combinator itself does not add any specificity. The specificity of the complete selector is determined by the selectors on either side of the combinator.

Selector	Specificity
`h2 + p`	`0-0-2`
`.title + p`	`0-1-1`
`.title + .summary`	`0-2-0`
`#notice + p`	`1-0-1`

Next-Sibling Combinator Example

The following example uses h2 + p to select the paragraph immediately following the <h2>. The second paragraph is also a sibling of the heading, but it is not the next sibling and is not selected.

h2 + p {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other combinators select elements according to different relationships within the document structure:

Specifications

The next-sibling combinator is defined in the Selectors Level 4 specification.

CSS Next-Sibling Combinator