В некоторых случаях не требуется выбирать любой элемент-потомок; напротив, необходимо сузить диапазон выбора до дочернего элемента другого элемента. Предположим, надо выбрать элемент strong, только если он является дочерним элементом (а не просто потомком) элемента h1. Для этого используется символ-комбинатор селектора дочерних элементов, которым является символ «больше» (>):
h1 > strong {color: red;}
Это правило сделает красным элемент strong для первого из следующих далее h1 и не сделает для второго:
<h1>Это очень важно.</h1>
<h1> Это <em>действительно очень</em> важно.</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.