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

Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.

Контекстный селекторсостоит из простых селекторов разделенных пробелом. Так, для селектора тега синтаксис будет следующий [2, 5]:

Тег1 Тег2 { ... }

В этом случае стиль будет применяться к Тегу2, когда он размещается внутри Тега1, как показано ниже.

Пример использования контекстных селекторов:

…

<head>

…

P B {

font-weight: bold;

color: navy;

}

</style>

</head>

<body>

<div><b>Жирное начертание текста</b></div>

<p><b>Одновременно жирное начертание текста и выделенное цветом</b></p>

</body>…

В данном примере показано обычное применение тега <B> и этого же тега, когда он вложен внутрь параграфа <P>. При этом меняется цвет текста, как показано на Рис. 3.3.

Рис. 3.3. Результат использования контекстных селекторов

Замечание. Не обязательно контекстные селекторы содержат только один вложенный тег. В зависимости от ситуации допустимо применять два и более последовательно вложенных друг в друга тегов.

Более широкие возможности контекстные селекторы дают при использовании идентификаторов и классов. Это позволяет устанавливать стиль только для того элемента, который располагается внутри определенного класса.

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

<p>Это <b>пример</b> <var>соседних</var> селекторов.</p>

Теги <VAR> и <B> представляют собой соседние элементы.

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

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

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

Соседние селекторыудобно использовать для тех тегов, к которым автоматически добавляются отступы, чтобы самостоятельно регулировать величину отбивки. Например, если подряд идут теги <H1> и <H2>, то расстояние между ними легко регулировать как раз с помощью соседних селекторов.

Поскольку при использовании соседних селекторов стиль применяется только ко второму элементу, то размер отступов уменьшается за счет включения отрицательного значения параметра margin-top. При этом текст поднимается вверх, ближе к предыдущему элементу.