HTML & CSS reference

@scope

Applies rules only inside a given element (the scope root), optionally stopping at an inner boundary.

Syntax

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

Parameters

Parameter	Type	Description
(.root)	selector	The selector of the scope root; rules work inside it. Inside the block `:scope` means the root itself.
to (.limit)	selector	Optional. The lower boundary: elements inside it are not styled.

Examples

Styles for a card that do not leak into other parts of the page:

<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>

A "donut" scope: the rules stop at the nested .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>

Notes

@scope does not add specificity to the selectors inside. When two scoped rules conflict, the one with the closer root wins — useful for nested themes. Supported in Chrome and Safari since 2024, in Firefox since late 2025.

In the tutorial

Style scope: @scope — The @scope rule — styles that apply only inside a component, the lower boundary to, the :scope pseudo-class, root proximity in conflicts, a comparison with BEM and nesting, and browser support.

Thanks for reading!