Выбор дочерних элементов

В некоторых случаях не требуется выбирать любой элемент-потомок; напротив, необходимо сузить диапазон выбора до дочернего элемента другого элемента. Предположим, надо выбрать элемент strong, только если он является дочерним элементом (а не просто потомком) элемента h1. Для этого используется символ-комбинатор селектора дочерних элементов, которым является символ «больше» (>):

h1 > strong {color: red;}

Это правило сделает красным элемент strong для первого из следующих далее h1 и не сделает для второго:

Это очень важно.


Это действительно очень важно.



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

На этом фрагменте дерева можно без труда выделить родительско-дочерние отношения.


Например, элемент a – родитель элемента strong, он же и дочерний элемент элемента p. Можно было бы сопоставить элементы этого фрагмента с селекторами p > a и a > strong, но не с селектором p > strong, поскольку strong является потомком p, а не дочерним элементом. Можно также составлять в одном и том же селекторе комбинации потомков и дочерних элементов. Так, селектор table.summary td > p будет выбирать любой элемент p, являющийся дочерним элементом td, происходящего от элемента table, с атрибутом class, значение которого равно summary.

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

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

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