Modern CSS Authoring
Nesting & Scope
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.