← Back to at-rules

CSS At-rule

@scope

Structure

Limits the scope of CSS rules to a specific subtree of the DOM.

Syntax

@scope (.parent) { selector { } }

Example

@scope (.card) { p { color: #a1a1aa; } }

Common use cases

  • Component-scoped styles without BEM or CSS modules
  • Avoiding style leakage in large codebases
  • Scoping third-party widget styles

Practical developer insight

@scope is a newer CSS feature for native style encapsulation — similar to what CSS Modules or Shadow DOM provide, but in plain CSS. Currently limited browser support — check compatibility before using in production.

Related

@layer@supports:where()