Native CSS nesting
Nest rules without a preprocessor.
Sass-style nesting is now native CSS. Write child, state, and media rules inside the parent block β no build step, no & boilerplate where the spec can infer it.
Nest a rule inside a rule
Drop a selector inside another rule's braces and it resolves relative to the parent. .card { .title { β¦ } } styles .title descendants of .card β exactly like writing .card .title. The nested selector keeps the parent as its context, so related rules live together instead of scattering across the file.
& is the parent selector
Use & to refer to the element the parent matched β essential for pseudo-classes and compound selectors where you must attach directly to the parent rather than descend. &:hover, &:focus-visible, &.is-active, and &[disabled] all glue to the parent, producing .btn:hover rather than .btn :hover (note the space). When a nested selector starts with a non-letter (:, ., #, [, >, +, ~), the browser prepends an implicit descendant &, so a leading space is the difference between styling the parent and styling its children.
Media queries and combinators nest too
An @media (or @container, @supports) block can sit inside a rule and only its inner declarations are scoped to the parent β keep a component's responsive overrides next to its base styles. Combinators work the same way: & > li, & + &, and & ~ .note all compose against the parent selector, so child, adjacent-sibling, and general-sibling rules read in one place.
Try it 4 examples
Nest a descendant rule
HTML+CSS+JSintroThe card renders with an amber serif "Chamomile" heading above muted body text, proving the nested .title and .body blocks matched .card .title and .card .body without any preprocessor. Both child rules sit physically inside the .card braces yet style descendants, not the card itself.