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

@scope

Применяет правила только внутри заданного элемента (корня области), при желании останавливаясь на внутренней границе.

Синтаксис

@scope (.root) to (.limit) { … }

Параметры

Параметр	Тип	Описание
(.root)	selector	Селектор корня области; правила действуют внутри него. В блоке `:scope` означает сам корень.
to (.limit)	selector	Необязательно. Нижняя граница: элементы внутри неё не стилизуются.

Примеры

Стили карточки, которые не протекают в другие части страницы:

<style>
  @scope (.card) {
    :scope { border: 2px solid teal; padding: 8px; border-radius: 8px; }
    p { color: teal; margin: 0; }
  }
</style>
 
<div class="card"><p>Inside the card: teal.</p></div>
<p>Outside the card: unchanged.</p>

Область-«бублик»: правила останавливаются на вложенном .content:

<style>
  @scope (.tabs) to (.content) {
    a { color: white; background: navy; padding: 2px 6px; }
  }
</style>
 
<div class="tabs">
  <a href="#">Tab one</a> <a href="#">Tab two</a>
  <div class="content"><a href="#">A link inside the content stays normal</a></div>
</div>

Примечания

@scope не добавляет специфичности селекторам внутри. Если два правила из разных областей конфликтуют, побеждает то, чей корень ближе к элементу, — это удобно для вложенных тем. Поддерживается в Chrome и Safari с 2024 года, в Firefox — с конца 2025 года.

См. также

& — Селектор вложенности: во вложенном правиле `&` обозначает родительский селектор.
@layer — Группирует стили в каскадные слои: более поздний слой побеждает независимо от специфичности.
:where() — Работает как `:is()`, но всегда имеет нулевую специфичность.

В учебнике

Область стилей: @scope — Правило @scope — стили, которые действуют только внутри компонента, нижняя граница to, псевдокласс :scope, близость корня при конфликте, сравнение с БЭМ и вложенностью, поддержка браузерами.

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