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

Сущность селектора

Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку:

.element > ul {
   padding-top: 20px;
}

Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности.

Подробный анализ работы селектора дочернего элемента

Селектор элемента дочернего имеет схожие свойства с понятием селектор потомка. Однако существует характерная черта, которая показывает принципиальное отличие данных операций. Оно заключается в том, что влияние селектора потомка распространяется на абсолютно все элементы, в то время как дочерний селектор подчиняет стили позиций первого уровня классификаций.

Более наглядно оценить работу оператора дочернего селектора поможет следующий пример:

CSS

div > р {
   color: #ff0000; /* красный */
}

HTML

<div>
   Данная строка будет иметь по умолчанию черный текст.
   <span>Эта строка перекраситься в красный в следствие того, что р является дочерним
   тегом для дива.</span>
   <p>Опять видим черные буквы. <span>Здесь мы видим тоже черные символы, так как
   для этого спана родителем является тег р.</span></p>
</div>

Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности.

Ограничение для применения оператора дочернего селектора

Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье.

Зачем применяется

Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек.

Также селектор элемента дочернего используется для присвоения уникальных стилей элементам, родители которых уже известны за ранее. Другими словами:

.main > header {
   /* оформление относится только к главному хедеру */
}

Данный пример справедлив в тех случаях, когда тег header используют для выделения заголовков статей. В нашем случае мы задаем оформление только основному хедеру, и не задеваем второстепенные. Этот прием также позволяет избегать применения лишнего раза идентификаторов, что в свою очередь облегчает вес CSS-файла и делает его более читабельным.

Подводя итоги

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

Блог Vaden Pro