The **CSS adjacent sibling combinator (`+`)** is used to select the adjacent or next sibling element of a given element. 

> A **combinator** combines [selectors](https://www.educative.io/answers/what-are-css-selectors) in a way that gives them a useful relationship to each other.

# Syntax

```css
first_element + target_element { style properties }
```
The adjacent sibling combinator (`+`) only matches the second element (`target_element`) if it immediately follows the first element (`first_element`) and if both selectors are children of the same parent element. 

# Code

In this example, we add a `background-color` property to the adjacent sibling (`p`) element of the `div` element.

Both `p` and `div` elements have the same parent, `body` element.

> Notice that the property is not applied to the second `p` element because it is not the *immediate* next sibling to the `div` element.


<body>

  <div>This is division text</div>
  <p>This is first paragraph text</p>
  <p>This is second paragraph text</p>

</body>


/* p element that is the immediate
   next sibling of div elements */
div + p {
  background-color: plum;
}


codemirror

What is CSS next sibling?

The CSS adjacent sibling combinator ( + ) selects and styles elements immediately following a specified sibling element.