Firefox Tomorrow

css combinator

Next-sibling combinator

View on MDN ↗

The next-sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

Syntax

/* The white space around the + combinator is optional but recommended. */
former_element + target_element { style properties }

Examples

Basic usage

This example demonstrates how to select the next sibling if that next sibling is of a specific type.

CSS

We only style the <li> that comes immediately after an <li> that is the first of its type:

li:first-of-type + li {
  color: red;
  font-weight: bold;
}

HTML

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Selecting a previous sibling

The next-sibling combinator can be included within the :has() functional selector to select the previous sibling.

CSS

We only style the <li> with a next sibling that is an <li> that is the last of its type:

li:has(+ li:last-of-type) {
  color: red;
  font-weight: bold;
}

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three!</li>
  <li>Four</li>
</ul>

Result

Interactive exampleOpen the canonical MDN source to run this embedded demo.

Specifications

SpecificationsStandards references are available on the canonical MDN page.

Browser compatibility

Browser compatibilityCompatibility data is available on the canonical MDN page.

See also