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

Базовая линия 2023

Новое поступление

С декабря 2023 года эта функция работает на последних версиях устройств и браузеров. Эта функция может не работать на старых устройствах или браузерах.

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

Примечание: Дочернее правило не означает селектор дочернего элемента. Дочернее правило может выбирать родительский элемент или дочерние элементы в зависимости от использования селектора вложенности &.

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

Синтаксис

parentRule {
  /* parent rule style properties */
  & childRule {
    /* child rule style properties */
  }
}

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

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

.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 */
}

Примеры

Оба приведенных ниже примера дают одинаковый результат. Первый использует обычные стили 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 # nest-selector

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView Android
`Nesting_selector`	120 112 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	120 112 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	117	106 98 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	17.2 16.5 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	120 112 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	117	80 75 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	17.2 16.5 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	25.0 23.0 Не поддерживаются вложенные правила, начинающиеся с селектора типа.	120 112 Не поддерживаются вложенные правила, начинающиеся с селектора типа.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

Синтаксис

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

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

Примеры

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

HTML

CSS

Результат

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

HTML

CSS

Результат

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

Результат

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

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

См. также

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

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

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

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