CSS по шагам

Соседние селекторы


Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.

<p>Lorem ipsum <b>dolor</b> sit amet.</p>

Тег <B> является дочерним по отношению к тегу <P>, поскольку он находится внутри этого контейнера. Соответственно <P> выступает в качестве родителя <B>.

<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>

Теги <VAR> и <B> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <P>, никак не влияет на их отношение.

<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>

Соседними здесь являются теги <B> и <I>, а также <I> и <TT>. При этом <B> и <TT> к соседним элементам не относятся из-за того, что между ними расположен контейнер <I>.

Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами. Общий синтаксис следующий.

Селектор 1 + Селектор 2 { Описание правил стиля }

Пробелы вокруг плюса не обязательны, стиль при такой записи применяется к Селектору2, но только в том случае, если он является соседним для Селектора 1 и следует сразу после него.

Замечание

Соседние селекторы не поддерживаются браузером Internet Explorer.

В примере 10.1 показана структура взаимодействия тегов между собой.



Содержание раздела