Description

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and “adjacent” means “immediately following,” so there can be no elements between the sibling elements. The combinator in an adjacent sibling selector is a plus character (+), as shown in this example:

h2+p {
  ⋮ declarations
}

Applying the above selector to this block of HTML may make things clearer:

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above does not match this paragraph.</p>

The first paragraph matches the adjacent sibling selector h2+p, because the p element is an adjacent sibling to the h2 element. The second paragraph doesn’t match the selector. Although it’s a sibling of the h2 element, it’s not adjacent to that element.

If we apply the above selector to the following HTML block, the paragraph isn’t matched—it’s not a sibling to the heading, since they don’t have the same parent:

<h2>Heading</h2>
<div>
  <p>The selector above does not match this paragraph.</p>
</div>

If we apply the selector to the HTML block below, the paragraph is matched by the selector even though it appears not to be adjacent to the heading:

<h2>Heading</h2>
Lorem ipsum dolor sit amet.
<p>The selector above matches this paragraph.</p>

The selector matches the paragraph in this case because the node between them is a text node rather than an element node. So if you look at element nodes only, the heading and the paragraph are adjacent siblings.