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

Скажем, требуется оформить абзац, находящийся в дереве документа на одном уровне с заголовком, или создать специальное обрамление для списка, стоящего на одном уровне с абзацем. Чтобы выбрать элемент, расположенный на одном уровне с другим элементом и имеющий того же родителя, применяется комбинатор селектора сестринских элементов (adjacent-sibling combinator), представляемый в виде знака плюс (+). Как и комбинатор селектора дочерних элементов, этот символ может быть окружен пробелами по усмотрению автора.

Чтобы удалить верхний отступ абзаца, непосредственно следующего за элементом h1, запишем:

h1 + p {margin-top: 0;}

Этот селектор означает следующее: «выбираем любой абзац, расположенный непосредственно за элементом h1, имеющим общих родителей с элементом p». Наглядно представить себе, как работает этот селектор, проще всего, еще раз рассмотрев фрагмент дерева документа.

В этом фрагменте от элемента div происходит пара списков, один нумерованный, а другой нет, каждый из которых содержит по три элемента списка. Списки представляют собой сестринские элементы, и сами элементы списков – тоже сестринские элементы. Однако элементы первого списка не являются сестринскими для элементов второго списка, поскольку их родительские элементы разные.


(В лучшем случае они являются кузинами.) Помните, что из двух сестринских элементов одним комбинатором выбирается только второй элемент. Поэтому если вы записываете li + li {font-weight: bold;}, полужирным шрифтом будут выделены только второй и третий элементы каждого списка. Первые элементы списков останутся нетронутыми.

Для обеспечения правильной работы CSS требует, чтобы два элемента были приведены в «исходном порядке». В нашем примере за элементом ol непосредственно следует элемент ul. Это позволило бы выбрать второй элемент с помощью селектора ol + ul, но первый элемент посредством аналогичного синтаксиса выбрать не удастся. Чтобы можно было выбрать ul + ol, нумерованный список должен следовать непосредственно за ненумерованным списком. Следует добавить, что текст между двумя элементами не мешает работать комбинатору селектора сестринских элементов.



  1. Элемент списка 1

  2. Элемент списка 1

  3. Элемент списка 1


Это текст, который является частью элемента 'div'.

  • Элемент списка

  • Другой элемент списка

  • Еще один элемент списка




Даже несмотря на то, что между двумя списками вставлен текст, по прежнему можно сопоставлять второй список с селектором ol + ul.


Дело в том, что вклинившийся текст не стоит в одном блоке с сестринским элементом, а является частью родительского элемента div. Если бы вы включили этот текст в абзац, это бы помешало сопоставлению селектора ol + ul со вторым списком. Вместо этого пришлось бы написать приблизительно так: ol + p + ul. Как показывает следующий пример, комбинатор селектора сестринских элементов может применяться в сочетании с другими комбинаторами:

html > body table + ul{margin-top: 1.5em;}

Этот селектор надо понимать так: «выбираем любой элемент ul, расположенный непосредственно за сестринским элементом table, являющимся потомком элемента body, который сам представляет собою дочерний элемент элемента html». Internet Explorer для Windows вплоть до версии IE6 не поддерживает селекторы дочерних и сестринских элементов. IE7 поддерживает оба типа селекторов.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Выбор дочерних элементов
Выбор конкретного атрибута
Выбор между селектором классов и селектором идентификаторов
Выбор на основании конкретного значения атрибута
Выбор первого дочернего элемента

Вернуться в раздел: CSS / 2. Селекторы