Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.
Синтакс
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 не применяется до того, как ссылка потеряет фокус.