Native CSS Nesting Playground — & Selector Snippet

For over a decade, nesting selectors inside one another — writing .card { & .title { ... } } instead of repeating .card .title { ... } as a flat rule — was something you could only get through a CSS preprocessor like Sass or Less, which meant a build step, a compiler, and source maps just to keep related styles visually grouped in your source file. Native CSS Nesting, standardized by the CSS Nesting Module and shipped in Chrome/Edge 112+, Safari 16.5+, and Firefox 117+ (giving it full baseline browser support since mid-2023), brings this directly into the CSS language itself — no tooling required, no .scss file extension, just a .css file the browser parses natively.

How native CSS nesting works technically

Inside a rule block, you can nest another selector, and it will be interpreted relative to the parent selector. The explicit & symbol represents "the parent selector" and can be positioned anywhere in the nested selector — most commonly at the start (& .child) to mean descendant, or directly attached to a pseudo-class (&:hover) to mean "this same element, when hovered." When you nest a plain type or class selector without a leading & (like & .nc-icon or even just .nc-icon in some contexts), the browser implicitly treats it as a descendant combinator, equivalent to writing .nested-card .nc-icon as a flat rule. Crucially, nesting is not just a source-code convenience — it compiles down (conceptually, inside the browser's own CSS object model) to exactly the same flat, fully-qualified selectors that hand-written CSS would produce; there's no new specificity or matching model, just a more ergonomic way to author the same rules. You can nest indefinitely, including nesting pseudo-classes inside pseudo-classes, and — as of the same specification — nest at-rules like @media directly inside a selector block, which previously required breaking a component's styles across multiple, disconnected top-level @media blocks in a Sass or vanilla CSS file.

Why this matters for modern UI development in 2025/2026

The biggest practical win is co-location: everything relevant to .nested-card — its hover state, its child element styles, its own responsive behavior — lives inside one contiguous rule block instead of being scattered across the file as separate flat selectors that a reader has to mentally reassemble. This mirrors how component-scoped styling already works in JSX/CSS-in-JS and Vue single-file components, but now works in plain .css files with zero runtime or build overhead. It also removes a major reason many teams reached for Sass or PostCSS plugins in the first place — as native nesting support has matured, projects can increasingly drop the preprocessor step entirely for projects that only used it for nesting and variables (the latter now covered by native CSS custom properties), simplifying the build pipeline.

What this demo shows

The nested-card component's CSS uses four nesting patterns you'll use constantly: & .nc-icon for descendant selection, &:hover and &:focus-within for interactive pseudo-classes on the card itself, a doubly-nested & .nc-desc { & code { ... } } for a grandchild selector, and a nested @media (max-width: 300px) { & .nc-title { ... } } block for container-relative responsive tweaks — all inside one .nested-card { } block. The toggle below the preview lets you flip between that authored nested source and a hand-written flattened equivalent, so you can see exactly which flat selector each nested rule expands to conceptually — &:hover .nc-icon becomes .nested-card:hover .nc-icon, and the nested @media block becomes a standalone top-level @media block wrapping fully-qualified selectors.

Browser support and syntax caveats

Full native nesting support (including the more permissive syntax that doesn't always require a leading &) landed across evergreen browsers in 2023, so it's safe for most 2025/2026 production audiences. One easy mistake: nesting a bare type selector (like p { }) directly without & can be ambiguous with a declaration in older parsing rules, so many style guides still prefer always prefixing nested selectors with & for clarity, exactly as this demo does throughout.