CSS селектор соседних элементов

Селектор соседних элементов выбирает элементы, которые расположены сразу за другими элементами:

/* Выбор всех элементов <p>, которые расположены сразу
   после элемента <div> */
div + p { background-color: yellow; }

Данный селектор можно прочитать как Выбор всех элементов <p>, которые следуют в коде сразу за элементом <div>.

Селектор соседних элементов состоит из трёх частей: первым указывается элемент, предшествующий целевому элементу, после него указывается комбинатор смежных элементов ( + ) и затем целевой элемент. Комбинатор определяет взаимосвязь между двумя селекторами, показывая, что нужно выбрать только элементы <p>, следующие в коде за элементами <div>.

Между селектором и комбинатором соседних элементов допускается ставить пробел. Все селекторы в примере эквивалентны:

div+p { background-color: yellow; }
div+ p { background-color: yellow; }
div +p { background-color: yellow; }
div + p { background-color: yellow; }

Можно использовать или опускать пробелы по своему усмотрению.

Пример

div + p { background-color: yellow; }

<div>
  <p>Дочерний элемент. Не является смежным и не будет
  выбран селектором!</p>
</div>

<p>Смежный элемент, который будет выбран
селектором соседних элементов.</p>
  
<p>Ещё один элемент. Не является смежным (соседним),
не будет выбран селектором!</p>