CSS: @scope at-rule

ai answer

Can you explain CSS at rules at scope?

Sure. CSS @scope is a newer at-rule that lets you limit which styles apply to which parts of your HTML, without relying on complex selectors or high specificity.

It works like this: you define a scope root, and then only the selectors inside the @scope block will match elements that are descendants of that root.

A quick example: @scope (.card) { button { color: blue; } } — that means only buttons inside any element with class "card" get the blue color. Super clean way to avoid style leakage.

It’s still rolling out across browsers, but it’s really useful for component-based styling. Want me to show you a more practical example or compare it to other scoping methods like Shadow DOM?

How is it different from using descendant selector?

It's different in three key ways.

First, @scope has zero specificity impact — your styles inside it don't get boosted like they would with a .card button descendant selector.

Second, it respects proximity — if the same element could match two scopes, the one closest in the DOM wins, not the one with higher specificity.

Third, it's much cleaner to read and maintain — especially with multiple nested components.

Basically, descendant selectors fight with specificity wars. @scope gives you clean boundaries without that mess.