coderef

NestingBaseline · Widely available

CSS nesting allows for shorter selectors, easier reading, and more modularity by nesting rules inside others.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Dec 11, 2023. Widely available since Jun 11, 2026.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–119Not supported
120+Supportedsince Dec 5, 2023
Current: 155
Edge
12–119Not supported
120+Supportedsince Dec 7, 2023
Current: 154
Firefox
1–116Not supported
117+Supportedsince Aug 29, 2023
Current: 157
Safari
1–17.1Not supported
17.2+Supportedsince Dec 11, 2023
Current: 27
MobileChrome Android
18–119Not supported
120+Supportedsince Dec 5, 2023
Current: 155
Firefox Android
4–116Not supported
117+Supportedsince Aug 29, 2023
Current: 157
Safari iOS
1–17.1Not supported
17.2+Supportedsince Dec 11, 2023
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS
.card {
  padding: 1rem;

  & h2 { margin: 0; }

  &:hover { box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); }

  @media (width > 600px) {
    padding: 2rem;
  }
}

Feature detection

CSS · check before using
@supports selector(&) {
  /* nested rules are understood here */
}

/* or in JavaScript */
if (CSS.supports("selector(&)")) {
  // CSS nesting is supported
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (6). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSNestedDeclarations13013013218.213013218.2
CSSNestedDeclarations.style13013013218.213013218.2
CSSStyleRule.cssRules11211211716.511211716.5
CSSStyleRule.deleteRule11211211716.511211716.5
CSSStyleRule.insertRule11211211716.511211716.5
nesting12012011717.212011717.2