Указатели, зависящие от контекста

Мы научились устанавливать стили для контейнеров HTML независимо от того, где именно в документе они расположены. Но CSS дает нам больше возможностей. Мы можем точнее определять стили для указателей в зависимости от контекста (Contextual Selectors). В этом случае список указателей пишется через пробелы, без запятых, в нужном порядке, который определяет контекст. Вот, примеры:

li a {color: green}

все ссылки, находящиеся внутри списков, станут зелеными,

table p a {color: red}

все ссылки в параграфах, находящихся внутри таблиц, станут красными.

Это самый распространённый метод создания контекстуальных указателей, который называется «указателем потомков». Разберём его подробнее.

Указатели детей

«Детьми» или «дочерними контейнерами» контейнера HTML называются непосредственно вложенные в него контейнеры, он для них является «родительским» контейнером. Контейнеры, находящиеся на 2-м и более глубоких уровнях вложенности, «детьми» не являются – это дети детей, то есть «потомки».

CSS позволяет создать указатель для выбора дочерних контейнеров любого контейнера и изменить их свойства, применив CSS стили. Для этого перед указателем искомого контейнера надо вставить указатели его «предков», разделив их знаком >.

i > b {font-weight: normal}

В приведённом примере мы определяем все теги <B>, вложенные непосредственно в теги <I>, и выключаем для них полужирный шрифт. Все остальные теги <B> в документе останутся без изменений.

Указатели потомков

«Потомками» контейнера HTML называются любые вложенные в него контейнеры: это его «дети» (то есть непосредственно вложенные), дети его детей, и так далее, вглубь иерархии контейнеров.

Правильно используя указатели, мы можем прицельно применить CSS-стили к нужным контейнерам, сославшись на их родительский контейнер. Для этого перед указателем искомого контейнера надо вставить указатели его «предков», разделив их пробелами.

#footer li a {font-weight: bold}

В приведённом примере мы вроде бы создали список указателей, разделённый пробелами. На самом деле это один указатель потомков. Он указывает на все гиперссылки (контейнеры A) вложенные в списки (контейнеры LI), в свою очередь находящиеся внутри контейнера с идентификатором footer. У всех таких гиперссылок мы меняем толщину шрифта на bold (полужирный шрифт).

Указатели смежных элементов (Adjacent Sibling Selectors)

Если надо выбрать элемент, расположенный в HTML-документе непосредственно за другим элементом, например, выбрать все заголовки H1, следующие сразу за параграфами P, и изменить их верхний отступ, то применим следующее правило CSS:

P + h1 {margin-top: 20px}

Замечания:

1. будет выбран только заголовок H1, расположенный непосредственно после P. Если между элементами P и H1 встретится любой другой элемент, хоть один – то указатель не определится и правило не применится.
2. указатели смежных элементов появились в CSS2 и поддерживались, не во всех браузерах. В Internet Explorer они появились только с 7-й версии, в Opera – с 5-й версии.

Объявление!important переводится на русский как!важно. Если к паре свойство - значение дописать в конце объявление!important, тогда это значение CSS-свойства получит максимальный приоритет в каскаде стилей. Проще говоря, это объявление для элемента выполнится независимо от наличия других правил CSS для этого же элемента. Например,

li {font-weight: normal!important; color: red}

Замечание: ошибка располагать!important после точки с запятой. Браузер игнорирует такие записи.

Не нашли, что искали? Воспользуйтесь поиском: