(Cascading Style Sheets) CSS 2.1 Reference

CSS Adjacent Sibling Selector

What is a CSS Adjacent Sibling Selector?

The adjacent sibling selector specifies an element that immediately follows another element when both of the elements are siblings. Sibling elements share the same parent element. The syntax is two selectors separated by a plus (+) sign. The style is applied to the element specified on the right side of the plus sign when it immediately follows the element specified on the left. In the following example, the color property will be set to red for any <p> element that immediately follows a <h1> element. The style is NOT applied to the <h1> element and the last <p> element.

CSS Example:

  h1 + p {color: red;}

  <h1>The red style has not been applied to this element.</h1>
  <p>The red style has been applied to this element.</p>
  <p>The red style has not been applied to this element.</p>