Selectors and the cascade

@scope

Newly availablesince Mar 2026

Replaces: BEM-length class names invented to stop styles leaking. A rule applies from one element down to a boundary you name, and no further.

See it working

I am in the card, so I am styled.

I am inside the slot. The scope stopped before it reached me.

The syntax

@scope (.card) to (.card-slot) {
  p { color: var(--muted); }   /* stops at the slot */
}

Edit the demo’s CSS

This is the stylesheet running the demo above. Change a value and watch it. Break it on purpose: delete the modern line and you are looking at the fallback.

The demo’s CSS, editable

For browsers without it

Give the scoped elements a usable default colour outside the @scope block. A browser without @scope ignores the block and both paragraphs above read the same, which is plain but correct.

Before you ship it

It is not isolation

A scope limits which elements your selectors match. It does not wall the subtree off: rules from outside still reach in, and inherited properties such as color and font still pass through the lower boundary. Shadow DOM is the thing that isolates. Source

The specificity of & inside a scope differs by engine

MDN carries a warning that engines and versions disagree on what & scores inside an @scope block. Until that settles, avoid leaning on & to win a close fight; write the selector out instead. Source