Next-sibling combinator

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

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

Syntax

css
/* 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

  • that comes immediately after an
  • that is the first of its type:

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

    HTML

    html
      
  
    • One
      • 
  
    • Two!
      • 
  
    • Three
      •

    Result

    • 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

  • with a next sibling that is an
  • that is the last of its type:

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

    HTML

    html
      
  
    • One
      • 
  
    • Two
      • 
  
    • Three!
      • 
  
    • Four
      •

    Result

    • Specifications

    Specification
    Selectors Level 4
    # adjacent-sibling-combinators

    Browser compatibility

    See also