Что такое амперсанд (&) в CSS и для чего он используется в селекторах
Что проверяют
Понимаете ли вы, что & это ссылка на родительский селектор при вложенности, и знаете ли, что сейчас он есть не только в Sass и Less, но и в самом CSS. Следом спрашивают, чем нативная вложенность отличается от препроцессорной.
Как отвечать
& подставляет на своё место полный селектор родительского правила. Где стоит символ, туда и попадает родитель:
&:hover,&::before,&:not(.disabled): псевдоклассы и псевдоэлементы того же элемента, без пробела;&.active: тот же элемент с дополнительным классом. Пробел меняет смысл:& .activeэто уже потомок;.theme-dark &: родитель в конце, стиль элемента внутри тёмной темы;& + &: соседние однотипные элементы, например отступ между карточками;&__title,&--large: склейка строк для БЭМ. Это умеют только Sass и Less.
Нативная вложенность (CSS Nesting) работает во всех основных браузерах с 2023 года: Chrome 112, Safari 16.5, Firefox 117. Позже синтаксис ослабили, и вложенный селектор по тегу можно писать без &.
Различий с Sass три, и именно их ждёт интервьюер:
- нет конкатенации: в CSS
&это селектор, а не кусок текста, поэтому&__titleне превратится в.card__title; - специфичность: нативный
&ведёт себя как:is()от списка родителей. Для.a, #b { & .c {} }оба варианта получат специфичность id, а Sass развернёт правило в два селектора, у каждого своя специфичность; - где раскрывается: Sass разворачивает вложенность при сборке, нативную разбирает браузер, и старый браузер вложенные правила просто пропустит.
В проектах с CSS Modules и .module.scss амперсанд обычно пишут для состояний и модификаторов, не выходя за пределы одного компонента.
Где спотыкаются
Говорят, что & существует только в препроцессорах. В 2026 году это устаревший ответ.
Путают &.active и & .active. Один пробел превращает модификатор элемента в поиск потомка, и стиль молча перестаёт применяться.
Злоупотребляют вложенностью на четыре-пять уровней. Получаются длинные селекторы с высокой специфичностью, которые потом перебиваются только через !important. Разумная норма: не глубже двух уровней.