CSS Nesting & Selector - Native Nested Rules Explained

Native Nesting Without a Preprocessor

CSS Nesting (Selectors Level 4 / CSS Nesting Module) lets you write child and pseudo-class rules directly inside their parent — no Sass, no PostCSS plugin, no build step. The & symbol stands in for the enclosing selector.

.card {
  padding: 16px;
  border-radius: 8px;

  & > .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
  }

  &.is-featured {
    border-left: 3px solid gold;
  }
}

This compiles (in the browser) to four separate rules with the expected specificity.

Where & Goes Matters

& .child is a descendant selector — it's the same as .card .child. Without a leading combinator, the engine still treats relative selectors as descendants because the spec requires nested selectors to be relative selectors:

.parent {
  .child { } /* same as .parent .child */
  & .child { } /* identical */
  & > .child { } /* direct child only */
}

Specificity Surprise

& adopts the whole parent selector's specificity wherever it appears, even multiple times:

.btn.primary {
  & + & {
    margin-left: 8px;  /* (0, 4, 0) — twice as specific as you might expect */
  }
}

If you want to nest without inheriting the parent's score, wrap with :where(&):

.heavy-class {
  :where(&) p { color: gray; } /* p inside .heavy-class with low specificity */
}

Sass Migration

Sass @at-root and parent-suffix tricks (&__title) don't work natively — you can't concatenate selectors like &-foo to form .parent-foo. Native nesting always inserts a descendant or compound combinator. Plan your class names accordingly when migrating.

Browser Support

Chrome 120+ (Dec 2023), Safari 17.2+, Firefox 117+. Behind a flag earlier; fully shipped in evergreen browsers by mid-2024.