& селектор вложенности

Селектор вложенности CSS & явно задаёт связь между родительскими и дочерними правилами при использовании вложенности CSS. Он делает селекторы вложенного дочернего правила относительными к родительскому элементу. Без селектора вложенности & селектор дочернего правила выбирает дочерние элементы. Селекторы дочерних правил имеют такую же специфичность, как если бы они находились внутри :is().

Если селектор вложенности & не используется во вложенном правиле стиля, он представляет собой корень области видимости.

Синтаксис

/* Nested directly — adds whitespace (descendant) */
parentRule {
  & childRule { }
}

/* Attached to parent — no whitespace (e.g., pseudo-class, compound selector) */
parentRule {
  &:pseudo-class { }
}

/* Reversed context — & placed after another selector */
parentRule {
  otherRule & { }
}

Описание

Селектор вложенности & и пробелы

Рассмотрим следующий код, в котором вложенность используется без селектора вложенности &.

.parent-rule {
  /* parent rule properties */
  .child-rule {
    /* child rule properties */
  }
}

При разборе вложенных селекторов браузер автоматически добавляет пробелы между селекторами, создавая новое правило селектора CSS. Следующий код показывает эквивалентные невложенные правила:

.parent-rule {
  /* parent rule style properties */
}

.parent-rule .child-rule {
  /* style properties for .child-rule descendants for .parent-rule ancestors */
}

Когда вложенное правило нужно присоединить к родительскому правилу без пробела, например при использовании pseudo-class или создании составных селекторов, селектор вложенности & нужно поставить непосредственно перед ним, чтобы добиться желаемого результата.

Рассмотрим пример: мы хотим задать элементу стили, которые применяются постоянно, а также вложить некоторые стили, которые применяются только при наведении. Если не включить селектор вложенности &, будет добавлен пробел, и в итоге получится набор правил, применяющий вложенные стили ко всем элементам-потомкам, на которые наведён указатель, внутри селектора родительского правила. Однако это не то, что нам нужно.

.parent-rule {
  /* parent rule properties */
  :hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule *:hover {
  /* child rule properties */
}

Если добавить селектор вложенности & без пробела, элементы, соответствующие родительскому правилу, будут стилизованы при наведении.

.parent-rule {
  /* parent rule properties */
  &:hover {
    /* child rule properties */
  }
}

/* the browser parses the above nested rules as shown below */
.parent-rule {
  /* parent rule properties */
}

.parent-rule:hover {
  /* child rule properties */
}

Добавление селектора вложенности &

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

.card {
  /* .card styles */
  .featured & {
    /* .featured .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card {
  /* .featured .card styles */
}

Селектор вложенности & можно размещать несколько раз:

.card {
  /* .card styles */
  .featured & & & {
    /* .featured .card .card .card styles */
  }
}

/* the browser parses above nested rules as */

.card {
  /* .card styles */
}

.featured .card .card .card {
  /* .featured .card .card .card styles */
}

Не может представлять псевдоэлементы

Селектор & эквивалентен селектору :is() и имеет то же ограничение: он не может представлять псевдоэлементы.

Например, при использовании следующего правила стиля сгенерированное содержимое не будет стилизовано красным цветом, даже если оно вложено в <div class="important">, поскольку .important :is(.foo::before) не может соответствовать ни одному элементу.

.foo::before {
  content: "Hello";

  .important & {
    color: red;
  }
}

Это ограничение также распространяется на вложенные at-правила, свойства которых неявно оборачиваются в селектор &. Например, при использовании следующего правила сгенерированное содержимое не будет стилизовано красным цветом даже на небольшом экране, поскольку свойство color: red неявно оборачивается в селектор &, которым в данном случае является :is(.foo::before).

.foo::before {
  content: "Hello";

  @media (width < 600px) {
    color: red;
  }
}

Примеры

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

Использование обычных стилей CSS

В этом примере используются обычные стили CSS.

HTML

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
}

.example > a {
  color: tomato;
}

.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

Результат

Использование & во вложенных стилях CSS

В этом примере используются вложенные стили CSS.

HTML

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

CSS

.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

Результат

Использование & вне вложенного правила

Если & не используется во вложенном правиле стиля, он представляет собой корень области видимости. В этом случае все стили применяются к документу.

<p>Hover over the output box to change document's background color.</p>

& {
  color: blue;
  font-weight: bold;
}

&:hover {
  background-color: wheat;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Использование вложенности CSS
• Модуль вложенности CSS
• Модуль селекторов CSS