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