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

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

Синтаксис

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' в этой спецификации.
Рекомендация Изначальное определение

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) (Да) 7.0[1] (Да) (Да)
Возможность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 2.1 (Да) ? (Да) (Да)

[1] Интернет эксплорер 7 не обновляет стили корректно, когда элемент динамически размещается до элемента, отобранном селектором. А в Интернет эксплорер 8, если вставлен динамически кликом на ссылку, стиль превдокласса first-child не применяется до того, как ссылка потеряет фокус.

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