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

Синтакс

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!

Возможность 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 не применяется до того, как ссылка потеряет фокус.

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

Метки документа и участники

Внесли вклад в эту страницу: Demitrius, jswisher, BychekRU, Limitrof
Обновлялась последний раз: Demitrius,