Справочник HTML & CSS

&

Селектор вложенности: во вложенном правиле `&` обозначает родительский селектор.

Синтаксис

.parent { &:hover { … } }

Примеры

Правила для потомков и состояний написаны внутри родителя:

<style>
  .card {
    padding: 12px;
    border: 1px solid lightgray;
    & h3 { margin: 0 0 6px; color: teal; }
    &:hover { border-color: teal; }
  }
</style>
 
<div class="card"><h3>Nested CSS</h3>Hover over the card.</div>

Примечания

Встроенная вложенность CSS работает во всех актуальных браузерах с 2023 года. &:hover — сам элемент в состоянии наведения; & h3 (с пробелом) — h3 внутри него. Не делайте вложенность глубокой — максимум два-три уровня.

См. также

:hover — Срабатывает, пока над элементом находится указатель мыши.
A B — Комбинатор потомка: выбирает элементы B, которые находятся где угодно внутри элемента A.

В учебнике

Вложенность CSS — Встроенная вложенность правил в CSS — правила внутри правил, символ &, вложенные медиазапросы и поддержка браузерами.

Спасибо, что читаете!