In native CSS nesting, what does the & nesting selector refer to, and what does a nested rule that omits & match?

## What native nesting is Nesting lets one style rule contain another, so related rules live together instead of repeating a long ancestor selector. Preprocessors like Sass offered this for years; CSS itself gained it in the CSS Nesting specification, supported in current Chrome, Safari, and Firefox since late 2023. Unlike the Sass version, native nesting is resolved by the browser at parse time — there is no build step flattening it first. ```css .card { padding: 1rem; & .title { font-weight: 700; } &:hover { border-color: currentColor; } } ``` ## The nesting selector & `&` is a real selector, not a text macro. It matches whatever the enclosing rule's selector list matches. In the example above, `& .title` means "a `.title` inside something matched by `.card`", and `&:hover` is a compound selector meaning "the `.card` element itself, while hovered". Because `&` is an ordinary simple selector, it can appear anywhere a simple selector can: ```css .btn { .theme-dark & { background: #000; } /* .theme-dark .btn */ & + & { margin-inline-start: .5rem; } /* .btn + .btn */ } ``` That second pattern — `&` written after some other selector — is the standard way to express "this component, but only inside that context", and it has no equivalent if you think of `&` as merely "the parent prefix". ## Relative selectors: the implied descendant A nested selector that never mentions `&` is a **relative selector**, the same kind of selector you pass to `:has()`. The browser *absolutizes* it: if it starts with a combinator, `&` is inserted before that combinator; otherwise a descendant combinator plus `&` is prepended. ```css .menu { li { list-style: none; } /* == & li == .menu li */ > li { padding: .5rem; } /* == & > li == .menu > li */ + .menu { margin-top: 2rem; } /* == & + .menu */ } ``` Early implementations required a nested selector to begin with a symbol such as `&`, `.`, `#` or `:`, which is why older articles insist you must write `& span`. The specification was relaxed and current browsers parse a bare type selector like `span` correctly, so `& ` is now optional in that position — though writing it explicitly still reads more clearly to people used to the old rule. ## The space is meaningful The single most common beginner mistake is treating `&:hover` and `& :hover` as the same thing. They are not: ```css .card { &:hover { /* .card:hover — the card itself */ } & :hover { /* .card :hover — any hovered descendant */ } } ``` The same applies to `&.is-active` (the element that has both classes) versus `& .is-active` (a descendant with that class). Whitespace is the descendant combinator, so removing it makes a compound selector. ## What a nested rule is equivalent to Conceptually, each nested rule desugars to a top-level rule whose selector is the absolutized nested selector with `&` replaced by the parent selector list. The one wrinkle is that the parent list behaves like `:is(...)` when the browser computes specificity — `#hero, .card { & p { } }` matches the same elements as `#hero p, .card p`, but scores like `:is(#hero, .card) p`. That difference matters enough that it is worth reasoning about separately from "what does this match". Nesting can go several levels deep, and each level re-scopes `&` to the rule directly around it: ```css .card { .title { & span { text-decoration: underline; } /* .card .title span */ } } ``` Deep nesting is legal but produces long descendant selectors that are hard to override — the flattened result is exactly as specific as if you had typed it out by hand. ## Practical notes Nesting works inside conditional at-rules and, in the other direction, at-rules such as `@media` can be nested inside a style rule. A nested rule only styles elements; it cannot introduce declarations for something the parent does not contain, and it does not create any kind of scoping boundary — `.card { p { } }` still matches paragraphs nested arbitrarily deep inside a card unless you use the child combinator.