CSS nesting: вложенные селекторы без препроцессора

Нативный CSS nesting позволяет писать вложенные правила прямо в таблице стилей, без Sass или Less. Внутренний селектор применяется к потомкам родителя, а & явно ссылается на родительский селектор. Вложенные @media и другие at-rules тоже работают, сохраняя контекст компонента.

Оформить карточку с вложенными состояниями

.card {
    padding: 1rem;
    border: 1px solid #d0d5dd;
    border-radius: 8px;

    & .card__title {
        margin-block: 0 0.5rem;
        font-size: 1.125rem;
    }

    &:hover {
        border-color: #2563eb;
    }

    @media (min-width: 640px) {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: 1rem;
    }
}

& .card__title эквивалентен .card .card__title, а &:hover — .card:hover. Без & селектор тоже считается относительным, но для псевдоклассов и составных селекторов амперсанд делает намерение явным. Вложенный @media не требует & и применяется к правилам внутри .card.

Специфичность вложенного правила складывается из родителя и вложенного селектора, как если бы вы написали их через пробел. Не увлекайтесь глубиной: три-четыре уровня уже трудно читать, а итоговый вес селектора растёт и приводит к войне !important. Для крупных компонентов лучше BEM-имена или @scope.

Поддержка есть в Chrome 112+, Safari 16.5+ и Firefox 117+. В старых браузерах вложенный синтаксис будет проигнорирован, поэтому при необходимости соберите CSS через препроцессор или используйте @supports selector(&). Проверьте, что сборщик не добавляет свой префикс: современный PostCSS может как транспилировать nesting, так и оставить его нативно.

Вложенность не заменяет каскад: правило внутри .card всё равно применяется ко всем подходящим потомкам. Если стиль нужен только конкретному элементу, добавьте класс, а не углубляйте селектор. Для изоляции стилей в больших приложениях сочетайте nesting с CSS Layers (@layer).

Документация: MDN CSS nesting, Can I use.