Newly availableHelpful when @scope improves stylesheet organization, fallback behavior, or cascade control.
Syntax and cascade Newly available

@scope

The @scope CSS at-rule sets the scope for a group of rules.

Syntax and cascade

Overview

The @scope CSS at-rule sets the scope for a group of rules.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
@scope
118
118
146
17.4
118
17.4
DOM API
CSSScopeRule

The CSSScopeRule interface of the CSS Object Model represents a CSS @scope at-rule.
118
118
146
17.4
118
17.4
end

The end property of the CSSScopeRule interface returns a string containing the value of the @scope at-rule's scope limit.
118
118
146
17.4
118
17.4
start

The start property of the CSSScopeRule interface returns a string containing the value of the @scope at-rule's scope root.
118
118
146
17.4
118
17.4
CSS selector
at-scope

`&` treated as `:where(:scope)` in `@scope` blocks
143
143
142
26.2
143
26.2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
@scope (.card) to (.card-footer) {
  p {
    color: #4b5563;
    line-height: 1.6;
  }

  a {
    color: #2563eb;
    text-decoration: underline;
  }
}

/* Inline scope */
@scope (.sidebar) {
  :scope {
    background: #f8fafc;
    padding: 1rem;
  }

  nav a {
    display: block;
    padding: 4px 0;
  }
}

Live demo

cardinsidesco-p

@scope cardinsidesco-p demo.

PreviewFullscreen

sidebarsco-p

@scope sidebarsco-p demo.

PreviewFullscreen

nestedsco-p

@scope nestedsco-p demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use @scope to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links

Powered by web-features