Modern CSS Authoring

Nesting & Scope

Written by Swapnil RajaPublished 30 Jul 2026

Keep related selectors together with native nesting and limit selectors to a component subtree with @scope. The lesson compares native selector nesting with @scope, shows the parent selector, nested conditions, scope limits, and scoping proximity.

CSS nesting groups related rules beneath a parent selector. @scope limits where selectors match. One organizes the stylesheet’s source; the other establishes a matching boundary.

The features are often mentioned together because both reduce repeated selector text, but they should not be confused. Nesting can still produce a selector that reaches far into descendants. A scope can protect a component or content region even when the selector inside it is short and ordinary. This topic also connects with CSS Combinators and Cascade Layers.

Native nesting

Example

css

.card {
  padding: 1rem;

  & > h2 { margin-block-start: 0; }

  &:hover { border-color: #64748b; }

  @media (width >= 40rem) {
    padding: 1.5rem;
  }
}

The & represents the parent selector. Keep nesting shallow; a deeply nested stylesheet usually mirrors accidental markup structure and produces selectors that are hard to override.

Limit a rule to a region

Example

css

@scope (.article) to (.example) {
  a { text-decoration-thickness: 0.12em; }
  h2 { scroll-margin-block-start: 5rem; }
}

The scope root includes the article, while the optional limit excludes matching example subtrees. Scoped rules still participate in the cascade, which also considers scoping proximity.

Nesting and Scope Syntax

Syntax	Purpose	Example
&	Represents the nested rule's parent selector.	&:hover
Nested selector	Keeps a related descendant rule inside its parent rule.	.card { .title { ... } }
@scope	Limits selectors to a subtree.	@scope (.card) { ... }
Scope limit	Stops a scope before a nested boundary.	@scope (.article) to (.comments)

Complete Example

Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.

Complete runnable example

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nesting & Scope example</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
    }
    main { max-width: 70rem; margin-inline: auto; }
    article, section, aside, form, .card, .panel {
      padding: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 0.6rem;
    }

.card {
  padding: 1rem;

  & > h2 { margin-block-start: 0; }

  &:hover { border-color: #64748b; }

  @media (width >= 40rem) {
    padding: 1.5rem;
  }
}

@scope (.article) to (.example) {
  a { text-decoration-thickness: 0.12em; }
  h2 { scroll-margin-block-start: 5rem; }
}
  </style>
</head>
<body>
  <main><article class="card"><h2>Nested card rules</h2><p>Hover the card to see its nested state.</p></article><section class="article"><h2>Scoped article</h2><a href="#">Scoped link</a><div class="example"><a href="#">Excluded example link</a></div></section></main>
</body>
</html>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
CSS nesting	120	120	117	17.2
@scope	118	118	146	17.4

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.

Notes

Nesting groups source code. Scope establishes a selector boundary. They solve different problems and can be used independently.
Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
Use a fallback when the support table shows that one of your required browsers predates the feature.

Conclusion

Use nesting to group related rules and @scope to establish a real selector boundary.

Keep nesting shallow enough that the resulting selector is obvious, and use a scope limit when embedded examples or nested components must be excluded. Where @scope is outside the required browser range, preserve a fallback or use an established component-scoping approach.

PreviousCascade Layers NextLogical Properties