Built-in toolFree · No signup

CSS @scope Generator

@scope lets you contain a style rule to a specific subtree, with an optional lower boundary that excludes a nested portion of it entirely — solving the classic problem of a component's styles leaking into embedded or user-generated content nested inside it. Toggle between plain CSS and @scope on the live demo to see the difference, then copy the generated rule.

Share on X LinkedIn

Scope root selector

The element that establishes the scoped subtree.

Inner selector

Property

Value

Lower boundary (to)Set a lower boundary

Excludes a nested subtree from the scope — e.g. stop a card's styles from reaching into embedded third-party or user-generated content inside it.

Live demo

.card

Card's own text

.embed (nested, untrusted content)

Embedded content text

Only the card's own text is styled — the .embed boundary keeps the rule from reaching its content.

@scope CSS

@scope (.card) to (.embed) {  p {    color: #1d9e75;  }}

Without @scope (for comparison)

.card p {  color: #1d9e75;}/* ⚠ also matches inside .embed below — a plain descendant selector can't tell embedded content apart from the card's own content */

Was this tool helpful?

How to use

Set the scope root

The selector that starts the scoped subtree, e.g. .card.

Add a lower boundary (optional)

Exclude a nested wrapper (like embedded or third-party content) from the scope.

Toggle the demo

Switch between plain CSS and @scope to see exactly which elements get styled.

Copy the CSS

Copy the @scope rule into your stylesheet.