При использовании смежного соседнего селектора выбирается первый соседний селектор.
Например, возьмем сруктуру, в которой соседними элементами являются <h2>, <h3> и <p>, но нам нужно определить стили только для первого соседнего элемента от <h2>. Ниже показан код такой структуры:
-
<body>
-
<h2> Заголовок 2 <em>текст</ em> </h2>
-
<h3> Заголовок 3 текст </h3>
-
<p> Lorem ipsum dolor <em>sit</ em> amet <strong>sit</ strong> </p>
-
</body>
В виде дерева документа такая структура будет выглядеть так:
Используя следующее правило вы можете управлять стилями для всех элементов <h3>, которые являются смежными соседними для элемента <h2>.
-
h2 + h3 {
-
margin:-1em;
-
}
В представленном выше примере структуры смежными соседними элементами также являются <em> и <strong>:
Используя следуещее правило, вы также можете управлять смежными соседними элементами <strong> для элемента <em>
-
em + strong {
-
color:blue;
-
}
К сожалению, смежные соседние селекторы не поддерживаются браузерами IE5, IE5.5, IE6.
