CSS Adjacent sibling combinator (+) Selector

Description

The CSS adjacent sibling combinator selector ( + ) is used to select an element that is immediately after another specific element, and both elements must have the same parent element.

The adjacent sibling combinator is different from the general sibling combinator ( ~ ) in that the general sibling combinator can select any sibling element, regardless of whether it is immediately after the first element.

Here is an example of how to use the adjacent sibling combinator selector:

<div id="parent">
  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>
</div>

#parent p + p {
  color: red;
}

This CSS will select the second paragraph element in the #parent div element and make it red.

Another example:

<ul id="list">
  <li>Item 1</li>
  <li class="active">Item 2</li>
  <li>Item 3</li>
</ul>

#list li.active + li {
  background-color: yellow;
}

This CSS will select the third list item element in the #list ul element and make it yellow.

The adjacent sibling combinator selector can be used to select and style elements in a variety of ways. It is a useful tool for creating complex and nuanced CSS layouts.

Syntax

element+element {
    css declarations;
}

Example

div+p {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS adjacent sibling combinator selector.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes