Native CSS Nesting
Write nested CSS rules without a preprocessor using the native CSS nesting specification.
Native CSS Nesting is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What is CSS Nesting?
Native CSS Nesting (baseline 2024, all modern browsers) allows writing CSS rules inside other rules, mirroring the nesting syntax previously available only in Sass/Less preprocessors. Nested rules automatically inherit the parent selector's context.
Basic Nesting Syntax
Write child selectors inside a parent rule block. The browser automatically combines parent and child selectors. A & (nesting selector) explicitly references the parent selector for modifiers and pseudo-classes.
.card {
padding: 1rem;
.title { font-size: 1.25rem; }
&:hover { box-shadow: var(--shadow-md); }
&.is-active { border-color: var(--color-primary); }
}The & Nesting Selector
& explicitly represents the parent selector in nested rules. Use it for pseudo-classes (&:hover), pseudo-elements (&::before), modifier classes (&.active), and attribute selectors (&[disabled]). Without &, nested rules create descendant selectors.
Pseudo-element Nesting
Nest pseudo-element rules naturally inside the parent: .button { &::before { content: ""; } &::after { content: ""; } }. This co-locates all button styles — avoiding the selector repetition required in flat CSS.
Nesting at-rules
Media queries and other at-rules can be nested inside rules (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Responsive styles live with the element they affect rather than in a separate media query block at the end of the file.
Selector Specificity
Nesting does not change specificity rules — the combined selector has the same specificity as if written flat. .card .title written nested or flat has the same specificity (0,2,0). Nesting is a syntax convenience, not a specificity change.
Implicit Descendant vs Explicit &
A nested selector without & creates a descendant selector: .card { .title {} } compiles to .card .title. With &: .card { &.active {} } compiles to .card.active (no space — modifier class, not descendant).
BEM with Native Nesting
Native nesting is not ideal for BEM — .block__element and .block--modifier selectors are strings, and nesting cannot construct them with & alone. Use nesting for pseudo-classes and nested component structures rather than BEM string concatenation (that still needs a preprocessor).
Migrating from Sass
Most Sass nesting syntax is identical to native CSS nesting. Exceptions: Sass allows &-modifier string concatenation (native CSS does not). Migrate by checking for &- or &__ patterns and flattening those specific rules while keeping other nesting.
Browser Support
Native CSS Nesting is supported in Chrome 112+, Firefox 117+, Safari 16.5+. For older browser support, use PostCSS with postcss-nesting to transform native nesting syntax to flat CSS during build — enabling authoring in native nesting today.
DevTools and Nesting
Chrome DevTools shows nested rules in the Styles panel in their nested form. Clicking a nested rule jumps to the correct source location in the Sources panel. Debugging nested CSS is as clear as debugging flat CSS in modern DevTools.
Knowledge Check
What is the difference between nesting with and without the & selector?
Summary
Native CSS Nesting enables Sass-like nested syntax in plain CSS. The & selector creates compound selectors for pseudo-classes, pseudo-elements, and modifiers. Nested @media queries co-locate responsive styles with their elements. PostCSS transforms native nesting for older browsers, enabling gradual adoption today.
Frequently asked questions
Is the “Native CSS Nesting” lesson free?
Yes — the full text of “Native CSS Nesting” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Native CSS Nesting”?
Write nested CSS rules without a preprocessor using the native CSS nesting specification. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Native CSS Nesting” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.