Adjacent sibling combinator

The adjacent 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

former_element + target_element { style properties }

Examples

CSS

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

HTML

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

Result

Specifications

Specification Status Comment
Selectors Level 4
The definition of 'next-sibling combinator' in that specification.		 Working Draft Renames it the "next-sibling" combinator.
Selectors Level 3
The definition of 'Adjacent sibling combinator' in that specification.		 Recommendation
CSS Level 2 (Revision 1)
The definition of 'Adjacent sibling selectors' in that specification.		 Recommendation Initial definition.

Browser compatibility

BCD tables only load in the browser

See also