Селектор дочернего элемента

Предыдущая статья Селектор потомка.

Описание селектора:

• Выполняемая задача — выбор дочерних элементов.
• Обозначение — цепочка: простой селектор родителя, комбинатор «>», простой селектор дочернего элемента.
• Пример использования:

Зададим отступ слева для списка, непосредственно вложенного в элемент с классом content (на списки второго уровня вложенности эти правила не подействуют):

.content > ul {
	margin-left: 20px;
}

Подробнее про селектор дочернего элемента

Основное отличие селектора дочернего элемента от рассмотренного ранее селектора потомка — тот факт, что если селектор потомка выбирает все потомки, независимо от уровня вложенности, то селектор дочернего элемента выбирает потомков только первого уровня — то есть непосредственно вложенные элементы. Например, напишем такой CSS:

div > span {
	color: #555; /* серый цвет */
}

…и такой код:

<div>
	Этот текст будет черного цвета.
	<span>А этот серого, ведь этот span — дочерний элемент для div.</span>
	<p>Тут опять черный текст. <span>И этот текст тоже черный, так как этот span не дочерний для div. Его непосредственный родитель — тег p.</span></p>
</div>

На span, который находится внутри p (строка 4) заданные стили не распространяются. Глубина вложения играет роль!

Ограничение

IE6 не понимает этот селектор. Если ты все еще вынужден поддерживать эту допотопную версию браузера — почитай статью Селектор потомков > для IE6. Там ты найдешь соответствующее лекарство.

Область применения

Применяется, как правило, для уменьшения объема CSS, там, где нужно разделить стили непосредственно вложенных элементов и элементов второго (и более) уровня вложенности. Например, при оформлении вложенных списков (допустим, выпадающих меню).

Еще одно применение — специфическое оформление элементов с известными заранее родителями:

.main > header {
	/* стили,  применяющиеся только для основной шапки сайта */
}

Если тег header будет использован в HTML еще где-то кроме шапки (например, для выделения заголовка статьи), то он не унаследует левые для него стили шапки сайта.

Такой прием позволяет не задавать класс (или id) для элемента header и, тем самым, хоть немного, а упростить HTML код.

Следующая статья — Селектор сестринского элемента.