Селекторы сестринских элементов имеют следующий синтаксис: E1 + E2, где E2 – область применения данного селектора. Он сопоставим, если E1 и E2 являются дочерними элементами одного и того же родительского элемента в дереве документа, и E1 непосредственно предшествует E2.
В определенных случаях сестринские элементы генерируют объекты форматирования, отображение которых осуществляется автоматически (например, уменьшение вертикальных полей между смежными блоками). Селектор “+” позволяет разработчикам определять дополнительные стили для сестринских элементов.
Таким образом, следующее правило утверждает, что если элемент P следует непосредственно за элементом MATH, то между ними не должно быть отступа:
MATH + P { text-indent: 0 }
В приведенном ниже примере уменьшается размер вертикального пространства между элементом H1 и непосредственно следующим за ним элементом H2:
H1 + H2 { margin-top: -5mm }
Следующее правило аналогично правилу из предыдущего примера, за исключением того, что в нем добавлен атрибут селектора. Таким образом, специальное форматирование выполняется, если для элемента H1 установлен класс class=”opener”:
H1.opener + H2 { margin-top: -5mm }
