CSS @scope Rule Tutorial

Introduction

CSS selectors usually look through the whole page.

For example:

1.title {2  color: navy;3}

This selects every element with the class title.

HTML:

1<section class=”card”>2  <h2 class=”title”>Card title</h2>3</section>4 5<section class=”modal”>6  <h2 class=”title”>Modal title</h2>7</section>

Both headings match .title.

That may be what you want.

But sometimes you only want a selector to apply inside one specific part of the page.

For example, you may want .title to mean:

1Select .title only inside .card

Traditionally, you might write this:

1.card .title {2  color: navy;3}

That works.

But CSS also has a newer at-rule called @scope.

It lets you limit a group of selectors to a specific part of the page or component.

Example:

1@scope (.card) {2  .title {3    color: navy;4  }5}

This means:

1Inside .card, select .title.2Outside .card, do not apply this rule.

The @scope rule is useful when you want component styles to stay focused, predictable, and easier to override.

What Is @scope in CSS?

@scope is a CSS at-rule.

An at-rule starts with an @ symbol.

Other CSS at-rules include:

1@media2@supports3@layer

The @scope rule creates a styling boundary.

Inside that boundary, selectors only apply within a specific part of the document.

Example:

1@scope (.profile-card) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9}

HTML:

1<section class=”profile-card”>2  <h2>Profile</h2>3  <p>This user is active.</p>4</section>5 6<section class=”article”>7  <h2>Article title</h2>8  <p>This paragraph is outside the profile card.</p>9</section>

The scoped h2 and p rules apply inside .profile-card.

They do not apply to the h2 and p inside .article.

Why Scoping Is Useful

Large pages often have many repeated class names and element types.

Example:

1<article class=”post”>2  <h2 class=”title”>Post title</h2>3</article>4 5<div class=”card”>6  <h2 class=”title”>Card title</h2>7</div>8 9<div class=”modal”>10  <h2 class=”title”>Modal title</h2>11</div>

If you write:

1.title {2  color: blue;3}

you affect every .title.

If that is too broad, you may write:

1.card .title {2  color: blue;3}

That is better.

But as projects grow, selectors can become long:

1.page .content .sidebar .card .title {2  color: blue;3}

Long selectors can be harder to maintain.

They can also be harder to override because they have higher specificity.

@scope helps by letting you say:

1@scope (.card) {2  .title {3    color: blue;4  }5}

The selector inside the scope can stay simple.

The scope controls where it applies.

Basic @scope Syntax

The basic syntax is:

1@scope (scope-root) {2  selector {3    property: value;4  }5}

The scope root is the element or elements that create the scoped area.

Example:

1@scope (.card) {2  h2 {3    color: navy;4  }5}

Here, the scope root is:

1.card

The scoped selector is:

1h2

This means:

1Select h2 elements inside .card.

A Simple @scope Example

HTML:

1<div class=”card”>2  <h2>Card title</h2>3  <p>Card text.</p>4</div>5 6<div class=”panel”>7  <h2>Panel title</h2>8  <p>Panel text.</p>9</div>

CSS:

1@scope (.card) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9}

Only the heading and paragraph inside .card are affected.

The heading and paragraph inside .panel are not affected by these scoped rules.

The result is:

1.card h2  gets color: navy2.card p   gets color: #3333333 4.panel h2 is unchanged by this scope5.panel p  is unchanged by this scope

@scope Limits Where Selectors Match

Inside an @scope block, selectors are limited to the scope root.

Example:

1@scope (.product-card) {2  .price {3    color: green;4    font-weight: bold;5  }6}

HTML:

1<div class=”product-card”>2  <p class=”price”>$29</p>3</div>4 5<div class=”checkout-summary”>6  <p class=”price”>$29</p>7</div>

Only the .price inside .product-card is styled.

The .price inside .checkout-summary is not styled by this rule.

That is the main purpose of @scope.

It narrows where selectors are allowed to match.

@scope Compared with Descendant Selectors

This selector:

1.card .title {2  color: navy;3}

and this scoped rule:

1@scope (.card) {2  .title {3    color: navy;4  }5}

can target similar elements.

But they are not exactly the same in how they affect the cascade.

The descendant selector includes .card as part of the selector.

That increases specificity.

The scoped rule uses .card as the scope root.

The selector inside the block is still just .title.

That means @scope can help keep selectors simpler and lower in specificity.

Specificity Without @scope

Example:

1.card .title {2  color: navy;3}4 5.title {6  color: green;7}

HTML:

1<div class=”card”>2  <h2 class=”title”>Card title</h2>3</div>

The title becomes navy.

Why?

The selector .card .title is more specific than .title.

Even if .title comes later, .card .title can still win because it has higher specificity.

Specificity With @scope

Now compare this:

1@scope (.card) {2  .title {3    color: navy;4  }5}6 7.title {8  color: green;9}

HTML:

1<div class=”card”>2  <h2 class=”title”>Card title</h2>3</div>

The scoped selector is still .title.

The scope root limits where it applies, but it does not add the same specificity as writing .card .title.

This makes scoped rules easier to override than long descendant selectors.

The scope controls location.

The selector still controls specificity.

Scope Root

The scope root is the top of the scoped area.

Example:

1@scope (.card) {2  p {3    color: #333333;4  }5}

The scope root is:

1.card

The scoped area includes the .card element and its descendants.

HTML:

1<div class=”card”>2  <p>This paragraph is inside the scope.</p>3 4  <div>5    <p>This nested paragraph is also inside the scope.</p>6  </div>7</div>

Both paragraphs are inside .card.

So both can match the scoped p rule.

The Scope Root Is Inclusive

The scope root itself is included in the scope.

However, the selector inside the block still needs to match the element.

Example:

1@scope (.card) {2  .card {3    border: 1px solid #dddddd;4  }5}

This can style the .card itself because .card is inside its own scope.

But there is a better way to target the scope root.

Use :scope.

The :scope Pseudo-Class Inside @scope

Inside an @scope block, :scope refers to the scope root.

Example:

1@scope (.card) {2  :scope {3    border: 1px solid #dddddd;4    padding: 1rem;5  }6 7  h2 {8    color: navy;9  }10 11  p {12    color: #333333;13  }14}

HTML:

1<div class=”card”>2  <h2>Card title</h2>3  <p>Card text.</p>4</div>

The :scope rule styles the .card element itself.

The h2 and p rules style elements inside the card.

This is a common pattern:

1@scope (.component) {2  :scope {3    /* styles for the component container */4  }5 6  .child {7    /* styles for children inside the component */8  }9}

A Component Example

HTML:

1<article class=”card”>2  <h2 class=”card-title”>CSS Basics</h2>3  <p class=”card-text”>Learn how CSS styles web pages.</p>4  <a class=”card-link” href=”/css”>Read more</a>5</article>

CSS:

1@scope (.card) {2  :scope {3    padding: 1rem;4    border: 1px solid #dddddd;5    border-radius: 8px;6    background-color: white;7  }8 9  .card-title {10    margin: 0 0 0.5rem;11    color: navy;12  }13 14  .card-text {15    color: #333333;16    line-height: 1.5;17  }18 19  .card-link {20    color: #2563eb;21    font-weight: bold;22  }23}

All of these styles belong to the .card scope.

They are easier to read as one component group.

Scoped Selectors Can Be Simple

Without @scope, you might write:

1.card .card-title {2  margin: 0 0 0.5rem;3  color: navy;4}5 6.card .card-text {7  color: #333333;8}9 10.card .card-link {11  color: #2563eb;12}

With @scope, you can write:

1@scope (.card) {2  .card-title {3    margin: 0 0 0.5rem;4    color: navy;5  }6 7  .card-text {8    color: #333333;9  }10 11  .card-link {12    color: #2563eb;13  }14}

The scope already says:

1These rules apply inside .card.

So the selectors inside the block can stay focused.

Scoping Element Selectors

@scope is especially useful when you want to use simple element selectors inside a component.

Example:

1@scope (.article-card) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9 10  a {11    color: #2563eb;12  }13}

HTML:

1<article class=”article-card”>2  <h2>Article title</h2>3  <p>Article summary.</p>4  <a href=”/article”>Read more</a>5</article>6 7<footer>8  <p>Footer text.</p>9  <a href=”/privacy”>Privacy policy</a>10</footer>

The scoped h2, p, and a rules apply inside .article-card.

They do not apply to the footer.

This lets you use simple selectors without styling the whole page.

Scope Limits

@scope can also have a lower boundary.

That lower boundary is called a scope limit.

The syntax is:

1@scope (scope-root) to (scope-limit) {2  selector {3    property: value;4  }5}

Example:

1@scope (.article-body) to (figure) {2  img {3    border: 4px solid navy;4  }5}

This means:

1Select images inside .article-body,2but stop before entering figure elements.

The scope root is:

1.article-body

The scope limit is:

1figure

Scope Limit Example

HTML:

1<section class=”article-body”>2  <p>Article text.</p>3 4  <img src=”photo.jpg” alt=”Example image”>5 6  <figure>7    <img src=”chart.jpg” alt=”Example chart”>8    <figcaption>Chart caption</figcaption>9  </figure>10</section>

CSS:

1@scope (.article-body) to (figure) {2  img {3    border: 4px solid navy;4  }5}

The first image gets the border.

The image inside <figure> does not get the border from this scoped rule.

Why?

The figure acts as the lower boundary.

The scoped rule does not apply inside that lower boundary.

Why Scope Limits Are Useful

Scope limits are useful when a section contains nested areas that should not receive the same styles.

Example:

1<article class=”content”>2  <p>Main article paragraph.</p>3 4  <aside class=”callout”>5    <p>Callout paragraph.</p>6  </aside>7</article>

You may want article paragraphs to have one style, but not callout paragraphs.

You can write:

1@scope (.content) to (.callout) {2  p {3    color: #333333;4    line-height: 1.7;5  }6}

This styles paragraphs in .content.

But it does not continue into .callout.

The callout can have its own styles.

Scope Root and Scope Limit

A scoped area can have:

1an upper boundary2a lower boundary

The upper boundary is the scope root.

The lower boundary is the scope limit.

Example:

1@scope (.content) to (.callout) {2  p {3    color: #333333;4  }5}

The root is:

1.content

The limit is:

1.callout

The rule applies inside .content.

It stops before .callout.

This type of scope is sometimes called a donut scope because it includes the outer area but excludes a nested area.

@scope Without a Limit

Most simple uses do not need a scope limit.

Example:

1@scope (.card) {2  h2 {3    color: navy;4  }5}

This applies inside .card.

That is often enough.

Use a scope limit only when you need to exclude a nested area.

Example:

1@scope (.article) to (.comments) {2  p {3    line-height: 1.7;4  }5}

This can style article paragraphs but avoid comment paragraphs.

Multiple Scope Roots

You can use more than one scope root.

Example:

1@scope (.card, .panel) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9}

This applies the same scoped styles inside .card and .panel.

HTML:

1<div class=”card”>2  <h2>Card title</h2>3  <p>Card text.</p>4</div>5 6<div class=”panel”>7  <h2>Panel title</h2>8  <p>Panel text.</p>9</div>

Both areas use the scoped styles.

This can be useful when several components share the same internal styling.

Multiple Scope Roots with a Limit

You can also combine multiple roots with a limit.

Example:

1@scope (.article-body, .guide-body) to (figure) {2  img {3    border-radius: 8px;4  }5}

This applies to images inside .article-body and .guide-body.

It stops before images inside figure.

Use this carefully.

If the scope becomes too broad, it may be clearer to write separate scopes.

Inline @scope

@scope can also be used inside a <style> element in HTML.

Example:

1<section class=”card”>2  <style>3    @scope {4      h2 {5        color: navy;6      }7 8      p {9        color: #333333;10      }11    }12  </style>13 14  <h2>Card title</h2>15  <p>Card text.</p>16</section>

When used this way, the scope can be based on the parent of the <style> element.

This can be useful for small examples or component-like HTML.

However, many projects keep CSS in separate files.

For normal project CSS, this standalone pattern is more common:

1@scope (.card) {2  h2 {3    color: navy;4  }5}

@scope Does Not Create a Shadow DOM

@scope limits where selectors apply.

It does not create a fully isolated component.

This is important.

Scoped styles are not the same as Shadow DOM styles.

Example:

1@scope (.card) {2  p {3    color: navy;4  }5}

This limits the p selector to paragraphs inside .card.

But normal CSS behaviour still exists.

For example:

1body {2  font-family: Arial, sans-serif;3}

Text inside .card can still inherit the body font.

Inheritance is not blocked by @scope.

@scope Does Not Stop Inheritance

Inheritance can cross scope boundaries.

Example:

1body {2  color: #333333;3}4 5@scope (.card) {6  p {7    font-weight: bold;8  }9}

HTML:

1<div class=”card”>2  <p>This paragraph is bold and inherits body color.</p>3</div>

The paragraph gets font-weight: bold from the scoped rule.

It can still inherit color: #333333 from the body.

The scope limits selector matching.

It does not block inherited values from outside.

@scope Does Not Prevent Outside Rules

Outside rules can still style elements inside the scope.

Example:

1@scope (.card) {2  p {3    color: navy;4  }5}6 7p {8  font-size: 18px;9}

HTML:

1<div class=”card”>2  <p>Card text.</p>3</div>

The paragraph can get:

1color: navy;2font-size: 18px;

The scoped rule sets the colour.

The outside rule sets the font size.

@scope does not make the inside elements invisible to the rest of CSS.

It only limits the selectors inside the scoped block.

@scope and Component Styling

A common use of @scope is component styling.

Example:

1<div class=”notification”>2  <h2>Success</h2>3  <p>Your changes were saved.</p>4  <button>Close</button>5</div>

CSS:

1@scope (.notification) {2  :scope {3    padding: 1rem;4    border-radius: 8px;5    background-color: #ecfdf5;6    color: #065f46;7  }8 9  h2 {10    margin: 0 0 0.5rem;11  }12 13  p {14    margin: 0;15  }16 17  button {18    font: inherit;19    color: inherit;20  }21}

The styles are grouped around the .notification component.

The selectors inside can be short.

This makes the CSS easier to scan.

@scope and Reusable Components

Suppose you have two components that both use a .title class.

HTML:

1<section class=”card”>2  <h2 class=”title”>Card title</h2>3</section>4 5<section class=”banner”>6  <h2 class=”title”>Banner title</h2>7</section>

CSS:

1@scope (.card) {2  .title {3    color: navy;4  }5}6 7@scope (.banner) {8  .title {9    color: white;10  }11}

The card title becomes navy.

The banner title becomes white.

Both components can use .title.

The scope controls which title rule applies.

This can reduce the need for long class names.

Should You Still Use Component Class Names?

Yes.

@scope does not mean you should stop using clear class names.

This is still useful:

1<article class=”card”>2  <h2 class=”card-title”>Card title</h2>3  <p class=”card-text”>Card text.</p>4</article>

Clear class names help readers understand the markup.

They also make CSS easier to search and maintain.

@scope is not a replacement for good naming.

It is a way to limit where selectors apply.

@scope and BEM-Style Naming

Many projects use naming patterns such as BEM.

Example:

1<article class=”card”>2  <h2 class=”card__title”>Card title</h2>3  <p class=”card__text”>Card text.</p>4</article>

CSS:

1.card__title {2  color: navy;3}4 5.card__text {6  color: #333333;7}

With @scope, you could write:

1@scope (.card) {2  .title {3    color: navy;4  }5 6  .text {7    color: #333333;8  }9}

This can reduce long component class names.

But it also means class names like .title and .text depend more on scope.

Both approaches can work.

Choose the one that makes your project easier to understand.

@scope and Specificity

@scope can help reduce specificity problems.

Example without @scope:

1.sidebar .card .title {2  color: navy;3}

This selector includes three class selectors.

It is more specific than:

1.title {2  color: green;3}

Example with @scope:

1@scope (.sidebar .card) {2  .title {3    color: navy;4  }5}

The scope root limits where the rule applies.

The selector inside the block is still .title.

This can make future overrides easier.

:scope Adds Specificity

The :scope pseudo-class behaves like a pseudo-class.

That means it adds class-level specificity.

Example:

1@scope (.card) {2  :scope {3    padding: 1rem;4  }5 6  :scope .title {7    color: navy;8  }9}

The selector:

1:scope .title

is more specific than:

1.title

because :scope adds specificity.

Use :scope when you need to target the scope root or a relationship from the root.

Do not add it everywhere unnecessarily.

Bare Selectors Inside @scope

A bare selector is a normal selector inside the scope.

Example:

1@scope (.card) {2  .title {3    color: navy;4  }5}

The bare selector is:

1.title

It is scoped to .card.

But it does not need to explicitly say .card .title.

That is the main benefit.

You get location control without always increasing selector specificity.

Using & Inside @scope

In modern CSS, the & nesting selector refers to the current context in nested CSS.

Inside @scope, you may see examples like:

1@scope (.card) {2  & .title {3    color: navy;4  }5}

For simple beginner CSS, this is usually not necessary.

This is clearer:

1@scope (.card) {2  .title {3    color: navy;4  }5}

Use the simplest selector that communicates your intent.

@scope and Nested Components

Scoping becomes especially useful with nested components.

Example:

1<div class=”light-theme”>2  <p>Light text</p>3 4  <div class=”dark-theme”>5    <p>Dark text</p>6 7    <div class=”light-theme”>8      <p>Light text again</p>9    </div>10  </div>11</div>

CSS without @scope:

1.light-theme p {2  color: black;3}4 5.dark-theme p {6  color: white;7}

The innermost paragraph is inside both .light-theme and .dark-theme.

Both rules can match.

Source order may decide the result, and that may not match the closest theme.

Scoped rules can help.

Scoping Proximity

When scoped rules conflict, CSS can consider scoping proximity.

Scoping proximity means:

1The rule whose scope root is closer to the element can win.

Example:

1@scope (.light-theme) {2  p {3    color: black;4  }5}6 7@scope (.dark-theme) {8  p {9    color: white;10  }11}

HTML:

1<div class=”light-theme”>2  <p>Black text</p>3 4  <div class=”dark-theme”>5    <p>White text</p>6 7    <div class=”light-theme”>8      <p>Black text again</p>9    </div>10  </div>11</div>

The innermost paragraph is closest to the inner .light-theme.

So the light theme rule can win for that paragraph.

This is useful for nested themes and nested components.

Scoping Proximity Does Not Beat Everything

Scoping proximity is part of the cascade.

But it does not beat every other cascade factor.

For example, specificity can still matter.

Important declarations can still matter.

Cascade layers can still matter.

A simple way to think about it is:

1@scope helps choose the closest relevant scoped rule,2but the normal cascade still exists.

You do not need to master every advanced cascade detail immediately.

Start by understanding that closer scopes can matter when scoped rules conflict.

@scope and Source Order

Source order still matters.

If two scoped rules have the same strength and the same proximity, the later rule can win.

Example:

1@scope (.card) {2  p {3    color: navy;4  }5}6 7@scope (.card) {8  p {9    color: green;10  }11}

HTML:

1<div class=”card”>2  <p>Card text.</p>3</div>

The paragraph becomes green.

Both rules use the same scope root.

Both target p.

The later rule wins.

@scope and Cascade Layers

You can use @scope with cascade layers.

Example:

1@layer components {2  @scope (.card) {3    h2 {4      color: navy;5    }6  }7}

This means:

1The rule belongs to the components layer.2It is scoped to .card.3It targets h2 elements inside .card.

Cascade layers control broad priority.

Scope controls where selectors apply.

They solve different problems.

@scope Inside a Layer Example

1@layer base, components, utilities;2 3@layer components {4  @scope (.card) {5    :scope {6      padding: 1rem;7      border: 1px solid #dddddd;8    }9 10    h2 {11      color: navy;12    }13  }14}15 16@layer utilities {17  .text-red {18    color: red;19  }20}

HTML:

1<div class=”card”>2  <h2 class=”text-red”>Card title</h2>3</div>

The utility may override the scoped component colour depending on the cascade layer order.

In this example, utilities is a later layer than components.

So the utility layer can win.

The scope decides where the component rule applies.

The layer decides priority between groups.

@scope and !important

You can use !important inside @scope.

Example:

1@scope (.card) {2  p {3    color: navy !important;4  }5}

But this should be used carefully.

@scope is often helpful because it reduces the need for forced overrides.

If you add !important too often, you can still make CSS hard to maintain.

Use scoped rules first.

Use normal cascade tools first.

Reach for !important only when there is a clear reason.

@scope and Browser Support

@scope is newer than many core CSS features.

If you are building for older browsers or controlled browser environments, check current browser support before relying on it for essential styling.

If support is a concern, you may need a fallback using ordinary selectors.

Example fallback:

1.card h2 {2  color: navy;3}

Scoped version:

1@scope (.card) {2  h2 {3    color: navy;4  }5}

For important production sites, test in the browsers your users actually use.

Fallback Approach

If you need to support browsers that do not understand @scope, use regular selectors.

Example:

1.card h2 {2  color: navy;3}4 5.card p {6  color: #333333;7}

Then, in environments where @scope is supported, you can organise newer CSS like this:

1@scope (.card) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9}

Do not duplicate styles blindly in a production stylesheet unless you have a clear support strategy.

The fallback approach depends on your project and browser requirements.

Practical Example: Card Component

HTML:

1<article class=”card”>2  <h2>CSS Scope</h2>3  <p>Scoped styles apply only inside this card.</p>4  <a href=”/learn”>Learn more</a>5</article>

CSS:

1@scope (.card) {2  :scope {3    padding: 1rem;4    border: 1px solid #dddddd;5    border-radius: 8px;6    background-color: white;7  }8 9  h2 {10    margin: 0 0 0.5rem;11    color: #111827;12  }13 14  p {15    color: #333333;16    line-height: 1.5;17  }18 19  a {20    color: #2563eb;21    font-weight: bold;22  }23}

This scopes the component styles to .card.

The h2, p, and a selectors do not affect the rest of the page.

Practical Example: Article Body

HTML:

1<article class=”article”>2  <header>3    <h1>Article Title</h1>4  </header>5 6  <div class=”article-body”>7    <p>Article paragraph.</p>8    <p>Another paragraph.</p>9  </div>10 11  <footer>12    <p>Footer text.</p>13  </footer>14</article>

CSS:

1@scope (.article-body) {2  p {3    line-height: 1.7;4    color: #333333;5  }6}

Only paragraphs inside .article-body are affected.

The footer paragraph is not affected by this scoped rule.

Practical Example: Excluding Nested Content

HTML:

1<article class=”article-body”>2  <p>Main article paragraph.</p>3 4  <aside class=”callout”>5    <p>Callout paragraph.</p>6  </aside>7 8  <p>Another main article paragraph.</p>9</article>

CSS:

1@scope (.article-body) to (.callout) {2  p {3    line-height: 1.7;4    color: #333333;5  }6}

The main article paragraphs are styled.

The paragraph inside .callout is not styled by this rule.

The .callout can have its own scope:

1@scope (.callout) {2  p {3    color: navy;4    font-weight: bold;5  }6}

This keeps the main article styling and callout styling separate.

Practical Example: Theme Scopes

HTML:

1<section class=”theme-light”>2  <p>Light theme text.</p>3 4  <section class=”theme-dark”>5    <p>Dark theme text.</p>6  </section>7</section>

CSS:

1@scope (.theme-light) {2  :scope {3    background-color: #f9fafb;4    color: #111827;5  }6 7  p {8    color: #111827;9  }10}11 12@scope (.theme-dark) {13  :scope {14    background-color: #111827;15    color: white;16  }17 18  p {19    color: white;20  }21}

Each theme can define styles for its own area.

If themes are nested, the closer scope can help the browser choose the right scoped rule.

Practical Example: Navigation

HTML:

1<nav class=”site-nav”>2  <a href=”/”>Home</a>3  <a href=”/lessons”>Lessons</a>4  <a href=”/contact”>Contact</a>5</nav>6 7<footer>8  <a href=”/privacy”>Privacy</a>9</footer>

CSS:

1@scope (.site-nav) {2  :scope {3    display: flex;4    gap: 1rem;5  }6 7  a {8    color: navy;9    text-decoration: none;10  }11 12  a:hover,13  a:focus-visible {14    text-decoration: underline;15  }16}

Only links inside .site-nav receive these navigation link styles.

The footer link is not affected by the scoped navigation rule.

Practical Example: Form Component

HTML:

1<form class=”signup-form”>2  <label for=”email”>Email address</label>3  <input id=”email” type=”email”>4  <button>Subscribe</button>5</form>

CSS:

1@scope (.signup-form) {2  :scope {3    display: grid;4    gap: 0.75rem;5    max-width: 320px;6  }7 8  label {9    font-weight: bold;10  }11 12  input {13    padding: 0.5rem;14    border: 1px solid #cccccc;15  }16 17  button {18    padding: 0.75rem 1rem;19    border: 0;20    background-color: #2563eb;21    color: white;22  }23}

The form styles apply only inside .signup-form.

Other forms on the page are not affected by these rules.

Practical Example: Repeated Class Names

HTML:

1<section class=”product-card”>2  <h2 class=”title”>Product</h2>3  <p class=”description”>Product description.</p>4</section>5 6<section class=”profile-card”>7  <h2 class=”title”>Profile</h2>8  <p class=”description”>Profile description.</p>9</section>

CSS:

1@scope (.product-card) {2  .title {3    color: #2563eb;4  }5 6  .description {7    color: #333333;8  }9}10 11@scope (.profile-card) {12  .title {13    color: #065f46;14  }15 16  .description {17    color: #334155;18  }19}

The same class names can be styled differently in different scopes.

This can be useful for small components.

But be careful.

If many components use generic class names like .title, .text, and .description, your CSS can become harder to search.

Use clear naming when it helps.

When to Use @scope

Use @scope when you want to limit selectors to a particular part of the page.

Good use cases include:

1component styles2article body styles3navigation styles4form styles5theme areas6nested components7third-party content areas8sections with repeated class names

It is especially helpful when the selectors inside the component can be simple.

Example:

1@scope (.card) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9}

When You May Not Need @scope

You may not need @scope for very simple CSS.

Example:

1.card {2  padding: 1rem;3}4 5.card-title {6  color: navy;7}

This is already clear.

If your component class names are specific and your stylesheet is small, ordinary selectors may be enough.

@scope becomes more useful when:

1selectors are getting too broad2selectors are getting too specific3components are nested4class names repeat in different areas5you want clear styling boundaries

Use it when it solves a real problem.

@scope vs CSS Modules

CSS Modules are a build-tool feature.

They often create unique class names automatically.

Example idea:

1.card_title__abc123

@scope is native CSS.

It works in the browser without a build step.

CSS Modules help avoid class name collisions by changing class names.

@scope limits where selectors match.

They solve related but different problems.

@scope vs Shadow DOM

Shadow DOM creates a stronger boundary.

Styles inside a shadow tree are isolated from the outside in a different way.

@scope does not create that kind of isolation.

It only scopes selector matching.

A simple difference:

1@scope limits selectors.2Shadow DOM creates encapsulated DOM and style boundaries.

Use @scope when you want normal CSS with better selector boundaries.

Use Shadow DOM when you need web component encapsulation.

@scope vs @layer

@scope and @layer solve different problems.

@scope controls where selectors apply.

@layer controls style priority.

Example:

1@layer components {2  @scope (.card) {3    h2 {4      color: navy;5    }6  }7}

This says:

1This rule belongs to the components layer.2It applies only inside .card.3It targets h2 elements.

Use @scope for location.

Use @layer for priority.

They can work together.

@scope vs :where()

The :where() pseudo-class can reduce specificity.

Example:

1.card :where(h2, p, a) {2  font-family: Arial, sans-serif;3}

This can be useful.

But :where() does not create a scope block.

@scope groups rules inside a boundary.

Example:

1@scope (.card) {2  h2 {3    color: navy;4  }5 6  p {7    color: #333333;8  }9 10  a {11    color: #2563eb;12  }13}

Use :where() when you need specificity control.

Use @scope when you want a clear scoped styling area.

Common Mistake: Thinking @scope Fully Isolates Styles

This is not correct:

1@scope makes a component completely isolated.

Better:

1@scope limits where selectors inside the block can match.

Outside CSS can still affect elements inside the scope.

Inherited values can still come from outside.

Other rules can still override scoped rules depending on the cascade.

@scope is a selector-scoping tool, not a complete isolation system.

Common Mistake: Forgetting :scope for the Root

This does not style the scope root unless the selector matches it:

1@scope (.card) {2  h2 {3    color: navy;4  }5}

This styles headings inside .card.

It does not style the .card box itself.

To style the root, use:

1@scope (.card) {2  :scope {3    padding: 1rem;4    border: 1px solid #dddddd;5  }6}

:scope means the scope root.

Common Mistake: Using Overly Broad Scoped Selectors

This can still be too broad:

1@scope (.content) {2  * {3    margin: 0;4  }5}

Even though it is scoped, it affects every element inside .content.

That may be too aggressive.

A clearer version is:

1@scope (.content) {2  h1,3  h2,4  p {5    margin-block: 0 1rem;6  }7}

Scope does not remove the need for careful selectors.

Common Mistake: Too Many Generic Class Names

This can become confusing:

1<div class=”card”>2  <h2 class=”title”>Card title</h2>3</div>4 5<div class=”modal”>6  <h2 class=”title”>Modal title</h2>7</div>8 9<div class=”banner”>10  <h2 class=”title”>Banner title</h2>11</div>

Scoped CSS can handle this:

1@scope (.card) {2  .title {3    color: navy;4  }5}6 7@scope (.modal) {8  .title {9    color: purple;10  }11}12 13@scope (.banner) {14  .title {15    color: white;16  }17}

But if every component uses the same generic class names, the HTML may be harder to understand.

Sometimes a clearer class name is better:

1<h2 class=”card-title”>Card title</h2>

Use scope and naming together.

Common Mistake: Not Checking Support

Because @scope is newer than older CSS features, do not assume every older browser supports it.

If older browser support matters, check compatibility and test.

For critical styles, consider whether ordinary selectors are safer:

1.card h2 {2  color: navy;3}

Use modern features deliberately.

Debugging Scoped Styles

When a scoped style does not apply, ask these questions:

1Does the browser support @scope?2Does the element sit inside the scope root?3Is the element excluded by a scope limit?4Does the selector inside the scope match the element?5Is another rule overriding it?6Is specificity involved?7Is source order involved?8Is a cascade layer involved?9Is !important involved?

Browser developer tools can help show which rules apply and which rules are overridden.

Full Example: Scoped Card

HTML:

1<article class=”card”>2  <h2>Scoped Card</h2>3  <p>This card uses scoped CSS.</p>4  <a href=”/learn”>Learn more</a>5</article>

CSS:

1@scope (.card) {2  :scope {3    padding: 1rem;4    border: 1px solid #dddddd;5    border-radius: 8px;6    background-color: white;7  }8 9  h2 {10    margin: 0 0 0.5rem;11    color: #111827;12  }13 14  p {15    margin: 0 0 1rem;16    color: #333333;17    line-height: 1.5;18  }19 20  a {21    color: #2563eb;22    font-weight: bold;23  }24}

The .card itself gets box styling.

The heading, paragraph, and link get internal styles.

Other headings, paragraphs, and links outside .card are not affected by these scoped selectors.

Full Example: Scoped Article Body with Limit

HTML:

1<article class=”article”>2  <div class=”article-body”>3    <p>Main paragraph.</p>4 5    <aside class=”note”>6      <p>Note paragraph.</p>7    </aside>8 9    <p>Another main paragraph.</p>10  </div>11</article>

CSS:

1@scope (.article-body) to (.note) {2  p {3    color: #333333;4    line-height: 1.7;5  }6}7 8@scope (.note) {9  :scope {10    padding: 1rem;11    background-color: #eff6ff;12  }13 14  p {15    color: navy;16    font-weight: bold;17  }18}

The main article paragraphs use the .article-body scoped styles.

The paragraph inside .note is excluded from that scope by the .note limit.

The .note scope gives the note its own styling.

Full Example: Scoped Navigation

HTML:

1<nav class=”nav”>2  <a href=”/”>Home</a>3  <a href=”/lessons”>Lessons</a>4  <a href=”/contact”>Contact</a>5</nav>6 7<main>8  <a href=”/article”>Article link</a>9</main>

CSS:

1@scope (.nav) {2  :scope {3    display: flex;4    gap: 1rem;5  }6 7  a {8    color: navy;9    text-decoration: none;10  }11 12  a:hover,13  a:focus-visible {14    text-decoration: underline;15  }16}

Only the navigation links get the scoped nav styles.

The main article link is not affected by the nav scope.

Full Example: Scoped Theme Areas

HTML:

1<section class=”theme-light”>2  <p>Light theme text.</p>3 4  <section class=”theme-dark”>5    <p>Dark theme text.</p>6 7    <section class=”theme-light”>8      <p>Light theme text again.</p>9    </section>10  </section>11</section>

CSS:

1@scope (.theme-light) {2  :scope {3    background-color: #f9fafb;4  }5 6  p {7    color: #111827;8  }9}10 11@scope (.theme-dark) {12  :scope {13    background-color: #111827;14  }15 16  p {17    color: white;18  }19}

The scoped theme rules help each paragraph use the closest relevant theme styles.

This is a good example of why scoping proximity can matter.

Best Practices for @scope

Use @scope to limit selectors to a component, section, or page area.

Use :scope when you want to style the scope root itself.

Keep selectors inside the scope simple.

Do not use @scope as an excuse for vague or confusing class names.

Use scope limits when you need to exclude nested areas.

Remember that @scope does not block inheritance.

Remember that outside CSS can still affect elements inside the scope.

Use @scope with @layer when you need both location control and priority control.

Avoid unnecessary !important inside scoped rules.

Check browser support if older browsers matter.

Prefer readable CSS over clever CSS.

Quick Reference

Basic scope:

1@scope (.card) {2  h2 {3    color: navy;4  }5}

Style the scope root:

1@scope (.card) {2  :scope {3    padding: 1rem;4  }5}

Scope with a lower boundary:

1@scope (.article-body) to (.callout) {2  p {3    line-height: 1.7;4  }5}

Multiple scope roots:

1@scope (.card, .panel) {2  h2 {3    color: navy;4  }5}

Scope inside a layer:

1@layer components {2  @scope (.card) {3    h2 {4      color: navy;5    }6  }7}

Quick Summary

@scope lets you limit selectors to a specific part of a page or component.

The scope root defines where the scoped area begins.

The optional scope limit defines where the scoped area stops.

Selectors inside an @scope block only apply inside that scoped area.

Use :scope to target the scope root itself.

@scope can help keep selectors shorter and easier to override.

It can reduce the need for long descendant selectors.

It does not create full style isolation like Shadow DOM.

It does not block inheritance from outside the scope.

Outside rules can still affect elements inside the scope.

Scoping proximity can help resolve conflicts between nested scopes.

@scope works well for components, article bodies, navigation areas, form components, themes, and nested UI sections.

Use it when you want clearer selector boundaries and more maintainable component styling.