Смежные селекторы

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.

Синтаксис

former_element + target_element { style properties }

Пример

li:first-of-type + li {
  color: red;
}
<ul>
  <li>Один</li>
  <li>Два</li>
  <li>Три</li>
</ul>

Так же может использоваться для задания стиля определённого класса "caption span" следующих <img> вложенных элементов:

img + span.caption {
  font-style: italic;
}

сработает только на тех тегах span, для которых задан класс caption:

<img src="photo1.jpg"><span class="caption">Первая фотка</span>
<img src="photo2.jpg"><span class="caption">Вторая</span>

Спецификации

Спецификация Статус Комментарий
Selectors Level 4
Определение 'next-sibling combinator' в этой спецификации.
Рабочий черновик  
Selectors Level 3
Определение 'Adjacent sibling combinator' в этой спецификации.
Рекомендация  
CSS Level 2 (Revision 1)
Определение 'Adjacent sibling selectors' в этой спецификации.
Рекомендация Изначальное определение

Поддержка браузерами

BCD tables only load in the browser

Смотрите также