Newly available Helpful when Nesting improves stylesheet organization, fallback behavior, or cascade control.

Nesting

The CSS & nesting selector explicitly states the relationship between parent and child rules when using CSS nesting. It makes the nested child rule selectors relative to the parent element. Without the & nesting selector, the child rule selector selects child elements. The child rule selectors have the same specificity weight as if they were within :is().

Note: Child rule does not mean child element selector. A child rule can target parent element or child elements depending on use of the & nesting selector.

If not used in nested style rule, the & nesting selector represents the scoping root.

Syntax and cascade

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:nesting
120
120
117
17.2
120
17.2
DOM API
CSSNestedDeclarations

The CSSNestedDeclarations interface of the CSS Rule API is used to group nested CSSRules.
130
130
132
18.2
130
18.2
style

The read-only style property of the CSSNestedDeclarations interface represents the styles associated with the nested rules.
130
130
132
18.2
130
18.2
cssRules

The cssRules property of the CSSGroupingRule interface returns a CSSRuleList containing a collection of CSSRule objects.
112
112
117
16.5
112
16.5
deleteRule

The deleteRule() method of the CSSGroupingRule interface removes a CSS rule from a list of child CSS rules.
112
112
117
16.5
112
16.5
insertRule

The insertRule() method of the CSSGroupingRule interface adds a new CSS rule to a list of CSS rules.
112
112
117
16.5
112
16.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • Does not support nested rules that start with a type selector.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • Does not support nested rules that start with a type selector.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17.2)
Implementation note
  • Does not support nested rules that start with a type selector.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (120)
Implementation note
  • Does not support nested rules that start with a type selector.
Notes 3 item(s)
Limitation
  • This browser only partially implements this feature
Removed
  • This feature was removed in a later browser version (17.2)
Implementation note
  • Does not support nested rules that start with a type selector.

Syntax

CSS 
.card {
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 8px;

  & .title {
    font-size: 1.25rem;
    font-weight: bold;
  }

  & .body {
    color: #4b5563;
    line-height: 1.6;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}

Live demo

nestedselekta-

CSS Nesting nestedselekta- demo.

PreviewFullscreen

&:hover class

CSS Nesting &:hover class demo.

PreviewFullscreen

nestedmedeiakeri

CSS Nesting nestedmedeiakeri demo.

PreviewFullscreen

Use cases

  • Maintainable CSS architecture

    Use Nesting to make stylesheet intent clearer in larger codebases and shared design systems.

  • Fallback management

    Control resets, imports, inheritance, or feature branches with explicit CSS rules instead of ad hoc duplication.

Cautions

  • Cascade-level tools are powerful, so misuse can make style ownership harder to understand.
  • Keep rules scoped and documented when they affect many selectors or entire stylesheets.

Accessibility

  • Global CSS controls should not accidentally remove focus, contrast, or structural cues.
  • Fallback paths should remain readable and functional, especially for assistive-technology users.

Related links