CSS Nesting: Browser Support, Syntax, Known Issues

What is CSS Nesting?

CSS Nesting is a W3C CSS Nesting Module Level 1 feature that lets authors write one style rule inside another, with child selectors resolved relative to the parent. The & nesting selector points to the outer rule explicitly. The browser parses nested rules natively, with no preprocessor build step required.

Which browsers does CSS Nesting support?

CSS Nesting works in every modern desktop browser and most mobile browsers, with Chrome and Edge shipping it first, Safari adding it in Safari 16.5, and Firefox following in Firefox 117. The relaxed grammar that lifts the leading-symbol restriction reached every major browser by Chrome 120, Safari 17.2, and Firefox 117.

How does CSS Nesting syntax work?

CSS Nesting wraps a child rule inside its parent rule, and the browser resolves the child selector relative to the parent. The & nesting selector points back to the outer rule and is required when the inner rule starts with a pseudo-class, a compound selector, or places the parent on the right side of a combinator.

The example below shows the same three rules written in flat CSS and in native CSS Nesting, plus a nested @media query. Both forms produce the same matched selectors at runtime.

/* Without nesting (flat CSS) */
.card { padding: 1rem; }
.card h2 { font-size: 1.25rem; }
.card:hover { border-color: blue; }

/* With native CSS Nesting */
.card {
  padding: 1rem;

  h2 {
    font-size: 1.25rem;
  }

  &:hover {
    border-color: blue;
  }

  @media (min-width: 768px) {
    padding: 2rem;
  }
}

A few rules apply across every browser that ships CSS Nesting:

• Use & for pseudo-classes and compound selectors: Write &:hover, &.active, or &[disabled] when the nested rule should apply to the parent itself, not to a descendant.
• Tag selectors work directly in the relaxed grammar: Browsers on the relaxed grammar accept h2, p, or button as a nested selector without a leading &. Older versions need .h2, &h2, or :is(h2).
• @media, @supports, and @container nest the same way: Drop a media query inside a rule and the inner declarations apply only when the query matches, with no need to repeat the outer selector.
• Specificity follows :is() rules: The & selector matches the specificity of the most-specific selector in the parent list, so nested compound rules can shift specificity in ways flat CSS does not.
• String concatenation is not possible: Native CSS Nesting cannot build BEM-style selectors like &__title because the parser treats the next token as a separate selector, not a suffix.

How do you check if a browser supports CSS Nesting?

Run a quick CSS.supports probe in DevTools, or guard a rule with @supports selector(&) inside a stylesheet. Both paths return a clear yes or no without changing the page.

• Open DevTools: In Chrome, Edge, or Firefox, press F12 (or Cmd-Option-I on macOS) and switch to the Console tab.
• Probe with CSS.supports: Paste CSS.supports("selector(&)") and press Enter. A return value of true means native CSS Nesting works in the current browser.
• Add a feature query in your stylesheet: Wrap nested rules in @supports selector(&) so older browsers ignore them and skip past to the flat fallback below.
• Reload the page: Refresh and confirm the nested rule applies in the Elements panel. If the rule shows as not matching, the browser is below the supported version range.
• Cross-check on real devices: Run the same check on iOS Safari, Android Chrome, and Samsung Internet, since older mobile builds lag desktop releases.

The console snippet below packages the probe and prints a one-line yes or no:

// Run in the browser DevTools Console
const supportsNesting = CSS.supports("selector(&)");
console.log("Native CSS Nesting:", supportsNesting ? "yes" : "no");

// Or guard a rule from inside a stylesheet:
// @supports selector(&) {
//   .card { &:hover { border-color: blue; } }
// }

If the probe returns false, fall back to a precompiled flat stylesheet built with PostCSS Nesting, Sass, or Less so the page still renders correctly.

What are the known issues with CSS Nesting?

CSS Nesting is now a W3C Baseline 2023 feature, but a handful of edge cases still trip up production sites. The biggest hits are the strict-versus-relaxed grammar split, specificity surprises, and older mobile browsers.

• Strict grammar in early Chrome and Safari builds: Chrome 112 to 119, Safari 16.5 to 17.1, and matching iOS builds reject a nested selector that starts with a tag name. Use & or :is() until you can drop those versions.
• Specificity shifts compared to Sass: The & selector resolves with :is() rules, so nested compound selectors like &.active inherit the highest specificity in the parent list. Flat rules that worked under Sass nesting can lose to native nesting unless you account for it.
• BEM-style concatenation is impossible: Native CSS Nesting cannot build .block__element from &__element. Sites that depend on this Sass pattern need a build-time tool.
• Order of declarations matters: Properties placed after a nested rule inside the same block are ignored in some browsers. Place every flat declaration before the first nested rule.
• Older Safari and iOS lacked support: Safari 3.1 to 16.4 on macOS and iOS 3 to 16.4 cannot parse nested rules. Sites that still serve macOS Big Sur 11.7 visitors or iPhones on iOS 16.4 need a flat fallback.
• WebView-based apps lag: Hybrid mobile apps shipped on top of an old Android System WebView or an old iOS WKWebView inherit the same gaps as the system browser, which means CSS Nesting may fail in production builds long after the system browser has updated.
• Linting and IDE support is uneven: Stylelint, PurgeCSS, and several CSS-in-JS tools added native nesting support late, so a passing lint run on one project can fail on another with the same source.

In my experience, the most surprising failure happens with the strict grammar in Chrome 112 to 119. A nested rule like h2 inside .card silently disappears from the cascade, the Elements panel shows the parent as if the inner rule never existed, and the only signal in DevTools is a quiet warning in the Issues tab. Pair every nested type selector with an & during that version window, or wrap the block in @supports selector(&) until you can drop those builds.

Citations

All CSS Nesting version numbers and platform notes in this guide come from these primary sources:

• W3C - CSS Nesting Module Level 1 specification: w3.org/TR/css-nesting-1
• MDN Web Docs - CSS nesting overview: developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting
• MDN Web Docs - Using CSS nesting: developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting/Using
• MDN Web Docs - & nesting selector: developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Nesting_selector
• Chrome for Developers - CSS Nesting: developer.chrome.com/docs/css-ui/css-nesting
• WebKit blog - Try CSS Nesting Today in Safari Technology Preview: webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview
• Mozilla Hacks - Firefox 117 announcement: hacks.mozilla.org Firefox 117 release coverage
• web.dev - Learn CSS: Nesting: web.dev/learn/css/nesting
• Chrome Platform Status - CSS Nesting feature: chromestatus.com/feature/5099039700123648
• W3C CSS Working Group - CSS Nesting GitHub repository: github.com/w3c/csswg-drafts/labels/css-nesting-1