Такие селекторы решают проблему переусложнения разметки. Вместо придумывания уникальных классов для каждого случая вы описываете иерархию. Это особенно полезно в больших проектах, где HTML уже построен.

Потомки и как они выбирают элементы

Потомки — это базовый тип вложенных селекторов. Они находят все элементы внутри родителя, независимо от глубины. Записываются через пробел: родитель потомок. Браузер читает справа налево, что ускоряет поиск.

Представьте nav с ссылками: nav a сделает белыми только ссылки внутри навигации, не трогая другие. Без этого пришлось бы добавлять классы вроде .nav-link. В реальном проекте это упрощает поддержку: меняете структуру HTML — стили подстраиваются.

Такой подход идеален для типичных блоков вроде меню или карточек товаров. Но если вложенность растет, код становится длинным. Переходим к примерам и нюансам.

• nav a { color: white; }: Ссылки внутри nav, на любом уровне.
• .menu ul li { font-size: 16px; }: Списки внутри меню, включая вложенные.
• article p { margin-bottom: 1em; }: Абзацы в статьях, но не снаружи.

Дочерние селекторы с символом >

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

Например, article > h3 { color: red; } окрасил только h3 сразу внутри article. Если h3 в div внутри article — не сработает. В отличие от потомков, это предотвращает случайное применение стилей. Идеально для сеток или форм.

В практике это спасает от конфликтов. Допустим, у вас блоки с подблоками: без > стили “протекут” глубже. Браузеры поддерживают давно, но не злоупотребляйте цепочками длиннее 3.

• .parent > p { color: blue; }: Только p напрямую в .parent.
• ul > li { list-style: none; }: Топ-уровень списка.
• section > .title { font-weight: bold; }: Заголовки сразу в секции, игнорируя вложенные div.

Новая нативная вложенность в CSS

Современный CSS ввел настоящую вложенность правил: селектор внутри селектора. Без препроцессоров вроде Sass. Родительский блок оборачивает дочерний: .parent { .child { … } }.

Это компилируется в .parent .child. Удобно группировать стили: меньше повторов, код читается как HTML-структура. Поддержка в Chrome 112+, Firefox 117+. Для составных используйте & — он ссылается на родителя.

Без & вложенность всегда потомок. С & строите .lg.triangle. В медиа-запросах тоже вкладывайте. Переходите осторожно: проверьте caniuse.com.

• .demo { color: blue; & .child { color: red; } }: Становится .demo .child.
• .btn { &:hover { opacity: 0.8; } }: .btn:hover.
• @media (max-width: 500px) { .page { font-size: 14px; grid-template-columns: 1fr; } }: Вложенное медиа.

Комбинирование и лучшие практики

Комбинируйте селекторы через запятую для групп: h1, .title { font-size: 2em; }. Смешивайте потомков, > и атрибуты. Но держите цепочки короткими — до 2-3 уровней.

Длинные селекторы вроде main article section p тормозят рендер. Лучше классы для специфичности. В Sass/Less это проще, но нативный CSS догоняет. Тестируйте в DevTools: смотрите Matches.

Используйте для модульных систем: BEM с вложенностью. Избегайте !important — вложенность повышает специфичность naturally.

• main article h2 { font-size: 28px; }: 3 уровня — ок.
• .news article h2, .blog article h2 { color: pink; }: Группировка.
• Избегайте: body div p span — слишком общее и медленно.

Селекторы как инструмент точной стилизации

Вложенность делает CSS мощным: от простых потомков до нативных блоков. Вы научились различать > и пробел, использовать & для хитростей. Осталось освоить псевдоселекторы вроде + для соседей или ~ для общих.

Подумать стоит о производительности: на мобильных длинные цепи заметны. Экспериментируйте в проектах, сочетая с Grid/Flexbox. В будущем контейнерные запросы добавят гибкости.