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

Можно написать стилевое правило, которое будет работать только при определенной комбинации вложенности тегов.

Допустим, мы создали таблицу стилей, согласно которой все заголовки первого уровня на странице отображаются красным цветом на сером фоне, все абзацы – зеленым цветом на желтом фоне, а все выделенные посредством тега <em> слова внутри абзацев – черным цветом на серебристом фоне. Код таблицы стилей при этом выглядит так:

h1 {color: red;

background-color: gray;}

p {

color: green;

background-color: yellow;

}

em {

color: black;

background-color: silver;}

Предположим, мы хотим также выделить какие-то слова в заголовке посредством того же тега <em>, но нас не устраивает появление черного цвета текста на серебристом фоне в заголовке. Мы хотим выделить слова в заголовке бордовым цветом на сером фоне. Для этого существуют контекстные селекторы. Запись правила, которое мы для этого добавим в таблицу стилей, будет выглядеть так:

h1 em {

color: #CC0000;

background-color: gray;

}

А вот пример кода страницы с использованием этого контекстного селектора:

<html>

<head>

...

<style>

h1 {color: red;

background-color: gray; }

p {color: green;

background-color: yellow;}

em {color: black;

background-color: silver;}

h1 em {color: #CC0000; /*Бордовый цвет символов */

background-color: gray;}

</style>

</head>

<body>

<h1>Это - заголовок первого уровня с <em>выделенным</em>

словом</h1>

<p>А это - обычный абзац с <em>выделенными словами</em>

</p>

</body>

</html>

В этом примере контекстным селектором является описанная в таблице CSS последовательность символических имен тегов h1 em {….}. Обратите внимание на то, что в стилевом селекторе между символическими именами тегов h1 и em отсутствует запятая. Это и есть признак контекстного селектора. Если же запись h3, em{color:blue} содержит запятую, то синий цвет приобретут как теги h3, так и теги em, то есть, запятая определяет одинаковые стили для группы тегов.

Контекстные и групповые селекторы можно комбинировать. Так запись

h3 em, h2 i{color:blue} равнозначна двум таким записям:

h3 em {color:blue}

h2 i{color:blue}

Еще одно замечание касается случая, когда по каким-то соображениям (или случайно) одно и то же свойство, например, выравнивание заголовка, или абзаца задано при помощи атрибута тега и одновременно прописано в правиле CSS. При этом не имеет значения как эти правила описаны: встроенные стили, с помощью внутренней (внедренной) или внешней таблицы CSS, например, имеется такая запись: <h2 align=”center” klass=”one”>Это заголовок 2-го уровня !</h2>. При этом свойству text-align селектора .one присвоено значение right. В общем случае именно это значение и будет приоритетным, т.е. заголовок будет выровнен по правому краю блока заголовка. Чтобы сделать приоритетным значение атрибута align, надо свойству text-align присвоить значение inherit (наследовать), или вообще удалить это свойство из набора свойств соответствующего стиля.

В заключении рассмотрения большого, серьезного и принципиального вопроса о каскадных стилях подчеркнем, что можно одновременно использовать встраиваемые и внедренные стили, различные селекторы, идентификаторы и фильтры, как показано в следующем примере:

<p class="pr2" style="width:120; font:25pt; "> Кафедра Графики </p>.

Здесь в теге <P > используется встраиваемый стиль и стиль, внедренный при помощи селектора CLASS. Последний описывается, как обычно, в головной части HTML-документа (тег <HEAD>) с помощью тега Style, или во внешней таблице стилей (см. ниже).

Рассмотрим еще один пример, в котором одновременно применяются классы, идентификаторы классов и их сочетания.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Идентификаторы</title>

<style type="text/css">

#A, .a {

border: none;

background: #f0f0f0;

color: green;

padding: 5px;}

.b {

border: 1px solid red;

color: red;

padding: 0; }

</style>

</head>

<body>

<p id="A" class="b">Стиль идентификатора</p>

<p class="a b">Стиль классов a и b</p>

<p class="b">Стиль класса b</p>

</body>

</html>

Для первого абзаца устанавливается стиль от идентификатора A и класса b, свойства которых противоречат друг другу. При этом стиль класса будет игнорироваться, так как приоритет идентификатора выше (см. пункт. 9.2) Для второго абзаца стиль задаётся через классы a и b одновременно. Приоритет у классов одинаковый, значит, в случае противоречия будут задействованы те свойства, которые указаны в таблице стилей ниже. К последнему абзацу применяется стиль только от класса b.

Указывая разные классы в атрибуте class тега P, мы можем комбинировать набор стилевых свойств и получить таким образом (для примера) блоки с рамкой, блоки без рамки, со скругленными или прямыми уголками. Это несколько похоже на группирование селекторов, но обладает большей гибкостью и может обеспечить существенную экономию используемых стилей.