Native CSS nesting in CSS: the ampersand that replaces Sass without a build step

For a long time, writing nested selectors in CSS meant reaching for a preprocessor like Sass or Less, then compiling that code before serving it to the browser. Native CSS nesting changes that: it lets you write, directly inside an ordinary .css file, rules nested one inside another.

This feature took a while to land in the specifications, but it is now supported by every modern browser, which changes how you can organize a style sheet without depending on a build step.

Definition

Native CSS nesting lets you write one CSS selector inside another, using the & symbol to represent the parent selector, exactly the way Sass has for years. A nested rule is resolved by the browser itself, with no compilation step at all, and the source code stays identical to what is actually interpreted.

In practice, instead of repeating a block selector for each of its states or children, you open a brace inside the parent rule and place the related rules there. The result is a shorter file, closer to the structure of the component it styles, and simpler to scan visually.

The ampersand syntax

The & symbol stands for the enclosing block's selector at the exact spot where it is placed. This lets you target a state like :hover, a direct child element, or a modifier class, without ever rewriting the parent selector in full. Without the ampersand, a nested selector that starts with an element is automatically treated as a descendant, which matches the most common intent anyway.

.card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: white;

  & h2 {
    margin-bottom: 0.5rem;
  }

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  &.card--featured {
    border: 2px solid currentColor;
  }
}

What it replaces from Sass

For more than a decade, Sass was the main reason to add a preprocessor to a CSS project, precisely to get nesting, variables and functions like mix(). Native nesting does not replace Sass on every one of these points, but it covers, on its own, the most common use case: grouping the styles of a component, its states and its direct children into a single readable block.

Variables now have their own native equivalent through custom properties, and functions like calc() cover a good part of the calculations once reserved for Sass. For many recent projects, combining these three native features is enough to drop a compilation step entirely, which simplifies the tooling chain and speeds up day to day development.

Browser support and compatibility

Native CSS nesting has been supported across every modern browser since 2023 and 2024 depending on the engine, which makes it usable in production for the vast majority of audiences in 2026. As with any recent feature, it remains sensible to check your actual audience coverage before removing an existing preprocessor from a project already in place.

For a project started today with no constraint from older browsers, nothing stops you from relying on native nesting alone from the start. For an existing project built with Sass, migration can happen gradually, file by file, without rewriting everything at once.

Effect on the cascade and specificity

Nesting changes nothing about the fundamental rules of the Cascade or the calculation of Specificity. A nested selector produces exactly the same flattened final selector that a preprocessor would have generated, with the same specificity as if you had written it yourself without nesting. There is therefore no surprise to expect on that front, which makes adoption in an existing project much easier.

Native nesting and naming methodologies

Native nesting also changes how some projects apply a naming methodology like BEM. Historically, a long class name like card__title--large existed precisely to avoid nesting and its specificity pitfalls in plain CSS. With native nesting handled carefully, some teams lighten their naming conventions while keeping the same readability in the final result the browser renders.

Frequently asked questions

Not entirely. It covers selector nesting, the most common use of Sass, but advanced features like loops or mixins remain specific to the preprocessor and have no direct native equivalent yet.

No, it is only needed to target a state, a pseudo-element, or to compose a selector that would not simply be a descendant. A nested element selector without an ampersand is treated as a descendant of the parent block by default.

It is supported by recent versions of every major browser since 2023 and 2024. For an older or highly mixed audience, check your actual coverage before removing an existing preprocessor from production.