Summary

  • The W3C’s 2021 first CSS Nesting draft let a child style rule sit inside a parent, using & to refer to that parent; declarations after a nested rule were then invalid.
  • By 2023 the draft allowed declarations and rules to mix but did not preserve their relative order. The 2026 draft used nested declarations rules to keep the order an author wrote.

A designer opens a card component and finds its button rules several screens below the card itself. She puts the button rule inside the card rule. The stylesheet suddenly reads like the thing it styles: room, room within room, small red button at the back. Then she adds a declaration after the inner rule and watches the paint behave as though the painter had come at the wrong hour. Indentation made the file easier to read; the cascade still had to decide what “after” meant.

The W3C’s first public CSS Nesting draft of 31 August 2021 introduced a style rule nested inside another, with the child selector interpreted relative to the parent. Its & selector gave an author a way to name the outer rule from inside the inner one. The draft also carried two doorways: direct nesting with a constrained selector form, and @nest for a less constrained selector. That extra doorway was a response to a parser’s awkward question. On seeing color:hover, is it looking at a selector or the start of a declaration? The text explained why the two grammars could require unbounded lookahead to tell apart.

The first answer to late paint was brutally simple. In the 2021 draft, declarations had to come before nested rules. A declaration placed after a nested rule was invalid and ignored. This kept the grammar and ordering tractable, but it made a normal editing move surprisingly consequential. An author could move a property down for readability and make it disappear. CSS had acquired a house with inner rooms and a strict rule about when the decorators could enter.

The 14 February 2023 draft no longer presented @nest as a separate rule. Authors could mix declarations and nested rules. The complication shifted from whether a late declaration was allowed to where it stood in the cascade: the draft said their relative order was not preserved. The text permitted a layout that looked like a sequence, while its model could treat those declarations differently from the sequence on the page. The button’s color was now a problem of source order, not merely a problem of punctuation.

The 22 January 2026 draft kept the mixed authoring style and gave late declarations an order-preserving representation. A declaration after or between nested rules is implicitly wrapped in a nested declarations rule. The machinery matters because a simple imagined & { ... } wrapper could change pseudo-element behavior and specificity. The 2026 text explains that tradeoff and records the path from an interim @nest wrapper to nested declarations rules. The answer became less visible to the author and more exact for the browser: keep the painter’s place in the queue without quietly repainting the selector.

The W3C publication history puts the three public drafts in 2021, 2023 and 2026. Their sequence tells a better story than “CSS finally got indentation.” A parent rule gave authors a local address for a child; the & made the relationship explicit; the ordering problem forced the specification to say what happens when declarations and nested rooms alternate. This is the small bargain behind a tidy component stylesheet. The author decides which rules belong together. The browser keeps the written order from becoming a practical joke.