How to Use CSS Nesting (Native, No Preprocessor)
Write cleaner stylesheets with native CSS nesting. Syntax, rules, and migration from Sass/Less.
- Write cleaner stylesheets with native CSS nesting.
- What Native CSS Nesting Is.
- Nesting Syntax and Rules.
- Migrating from Sass.
- Browser Support.
What Native CSS Nesting Is
CSS nesting lets you write child selectors inside parent selectors directly in your stylesheet. Instead of .card { } .card .title { } .card .title:hover { } as three blocks, write .card { .title { &:hover { } } }. Same compiled CSS, but source is organized with related styles grouped visually. This was the primary reason for Sass/Less — now browsers support it natively. Use the CSS Minifier to optimize your nested stylesheets for production.
Nesting Syntax and Rules
The ampersand (&) represents the parent selector: .card { & .title { } } equals .card .title { }. For pseudo-classes, & is optional when selector starts with a symbol: .card { :hover { } } works. You can nest media queries and container queries too: .card { @media (width > 768px) { display: grid; } }. Nesting depth should stay at 3–4 levels maximum — deeper nesting creates specificity and readability problems.
Migrating from Sass
Migrating from Sass: most Sass nesting translates directly. Key differences: native CSS requires & for element selectors (& h2 { } not just h2 { }), native CSS nesting doesn’t support Sass’s @extend or placeholder selectors, and native CSS variables (var()) replace Sass variables ($var). Migrate gradually — native and Sass nesting can coexist during transition.
Browser Support
Supported in Chrome 120+, Firefox 117+, Safari 17.2+, Edge 120+. Global support exceeds 88% and growing rapidly. For older browsers, nested rules are ignored — provide flat CSS fallbacks for critical styles or use a PostCSS nesting plugin as a build step. For new projects starting in 2026, native nesting is safe to use as the primary approach.