Селекторы потомков

Первое преимущество понимания этой модели – возможность определять селекторы потомков (descendant selectors), также известные как контекстные селекторы (contextual selectors). Определение селекторов потомков – это создание правил, действующих лишь в рамках заданной структуры. Например, требуется задать стили только для тех элементов em, которые происходят от элементов h1. Можно задать атрибут class для каждого элемента em, находящегося в h1, но эта процедура практически настолько же длительная, как и применение тега font. Очевидно, намного эффективнее объявить правила, которые соответствуют только элементам em, находящимся внутри элементов h1. Для этого напишите следующее:

h1 em {color: gray;}

Это правило сделает серым любой текст элемента em, который является потомком элемента h1. Текст других элементов em, например находящихся в абзаце или блоке, не будет выбран этим правилом. В селекторе потомков часть правила, соответствующая селектору, состоит из двух или более разделенных пробелами селекторов. Пробел между селекторами – это пример комбинатора (combinator). Каждый комбинатор-пробел, если читать его справа налево, может быть истолкован как «находящийся в», «который представляет собой часть» или «являющийся потомком».


Таким образом, h1 em можно перевести как: «любой элемент em, который является потомком элемента h1». (Если прочитать селектор слева направо, может получиться примерно следующее: «для любого h1, содержащего em, к em будут применены следующие стили».) Конечно, два селектора не предел. Например:

ul ol ul em {color: gray;}

Серым будет любой выделенный текст, представляющий собою часть ненумерованного списка, который является частью нумерованного списка, который, в свою очередь, есть часть ненумерованного списка (да, это не ошибка). Очевидно, что это очень специфичный критерий выбора. Селекторы потомков могут обладать исключительной силой. Они делают возможным то, что никогда не могло бы быть осуществлено в HTML, по крайней мере, без громадного количества тегов font. Рассмотрим простой пример. Предположим, имеется документ, содержащий врезку и основную область. У врезки – голубой фон, а у основной области – белый, и обе области включают списки ссылок. Нельзя сделать все ссылки синими, потому что тогда невозможно будет прочитать их во врезке.

Селекторы потомков позволяют обойти это препятствие. В данном случае ячейке таблицы, содержащей вашу врезку, назначается класс sidebar, а основной области – класс main.


Затем стили записываются так:

td.sidebar {background: blue;}
td.main {background: white;}
td.sidebar a:link {color: white;}
td.main a:link {color: blue;}

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

blockquote b, p b {color: gray;}

В результате текст элементов b, являющихся потомками абзацев или элементов blockquote, будет серым. Еще одно не упоминавшееся свойство селекторов потомков – степень удаления двух элементов может быть практически бесконечной. Например, если написать ul em, то будет выбран любой элемент em, происходящий от элемента ul, и насколько глубоко вложен em, значения не имеет. Таким образом, в следующей разметке ul em выбирает элемент em:


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

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

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

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

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

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

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


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




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

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

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