Селекторы дочерних элементов CSS

В отличие от селекторов потомков, подэлементные селекторы (Child selectors) могут выбирать только элементы, которые являются подэлементами определенного элемента.

Выбор подэлемента

Если вы не хотите выбирать любые потомки элементов, а хотите сузить диапазон, выбирая только подэлементы определенного элемента, пожалуйста, используйте подэлементный селектор (Child selector).

Например, если вы хотите выбрать только strong элементы, которые являются подэлементами h1, вы можете написать так:

h1 > strong {color:red;}

ЭтаRule будет изменять цвет первых двух strong элементов под следующим h1 на красный, но strong элементов под вторым h1 не будет изменяться:

<h1>Это <strong>очень</strong> <strong>очень</strong> важно.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

Попробуйте сами

Объяснение синтаксиса

Вы, наверное, уже заметили, что в подселекторе используется символ больше (дочерний символ).

С两侧 селектора может быть пробельный символ, это опционально. Поэтому, следующие записи đều являются правильными:

h1 > strong
h1> strong
h1 >strong
h1>strong

Если читать слева направо, селектор h1 > strong можно интерпретировать как «Выбрать все элементы strong, которые являются подэлементами элемента h1».

Сочетание селекторов потомков и дочерних элементов

Смотрите следующий селектор:

table.company td > p

Следующий селектор выбирает все элементы p, которые являются подэлементами элемента td, сам элемент td наследует класс company из элемента table, у которого есть класс company.