Поиск

Селекторы сестринских элементов

Селекторы сестринских элементов имеют следующий синтаксис: 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 }