0Pricing
CSS Academy · Lesson

@scope for Scoped Styles

Limit the reach of CSS rules to specific subtrees using the @scope at-rule.

What is @scope?

The @scope at-rule (Chrome 118+, Safari 17.4+) limits CSS rules to a specific subtree of the DOM. Rules inside @scope only apply to elements within the declared scope root, preventing style leakage across components.

Basic Syntax

Declare a scope with a scope root selector. All rules inside apply only to descendants of matching scope roots — not to the entire document.

@scope (.card) {
  .title { font-size: 1.25rem; }
  .body { padding: 1rem; }
}

All lessons in this course

  1. Native CSS Nesting
  2. :has() Relational Pseudo-class
  3. @scope for Scoped Styles
  4. View Transitions API
← Back to CSS Academy