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

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

Синтакс

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

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

Возможность 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,