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

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

Синтаксис

former_element + target_element { style properties }

Пример

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

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

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

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

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

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

Specification
Selectors Level 4
# adjacent-sibling-combinators

Совместимость с браузерами

BCD tables only load in the browser

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