Дочерний селектор

Стили к прямым детям: только первый уровень вложенности.

Уровень: начальный 10 разделов 8 минут

1. Что это и зачем

Стили к прямым детям: только первый уровень вложенности.

Селектор отвечает на вопрос «к каким элементам применить правило». Браузер сопоставляет селектор с деревом DOM и вычисляет специфичность элемента. Чем выше специфичность, тем увереннее правило побеждает в каскаде — это основа, на которой строится вся психология CSS.

Селектор — язык веб-разработчика: удачно выбранный селектор упрощает правила, а неудачный — плодит специфичность и !important.

2. Синтаксис и пример

.menu > li { border-bottom: 1px solid; }

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

3. Нюансы и частые варианты

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

В реальной разметке дочерний селектор встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Классические селекторы работают во всех браузерах. Новые (:has, :is, :where, :nth-child(of ...)) требуют свежего браузера — для них есть fallback-варианты, а сами они сокращают дублирование CSS.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Значок > ограничивает вложенность одним уровнем.

Частая ошибка: забыть, что > отличает прямых детей.

7. Практическое задание

Разделите линии только между прямыми пунктами меню.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

.menu > li { border-bottom: 1px solid; }

8. Как применять в проектах

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

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

специфичность правил управляемая, !important не злоупотребляют;
выбор селектора отражает смысл, а не форму;
новые псевдоклассы используются с fallback;
длинные цепочки разбиты на компонентные классы;
правила группируются: общее и различия идут раздельно;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам