Newly availableHelpful when Nesting improves stylesheet organization, fallback behavior, or cascade control.
Syntax and cascade Newly available

Nesting

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

Syntax and cascade

Overview

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

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

Powered by web-features