Native CSS Nesting: the & selector, browser support, and Sass differences

CSS nesting lets you write rules inside other rules, so styles that belong together stay together. For years this was only possible with a preprocessor like Sass. It is now a native CSS feature, shipping in every modern browser — no build step required.

The basic idea

Instead of repeating the parent selector for every child, you nest the child rule inside it. These two blocks produce the same result:

/* Flat, traditional CSS */
.card { padding: 1rem; }
.card h2 { margin: 0; }
.card p { color: #555; }

/* Nested */
.card {
  padding: 1rem;
  h2 { margin: 0; }
  p { color: #555; }
}

Each nested selector is read relative to its parent, so .card p is what the browser actually applies.

The & nesting selector

The ampersand & refers to the parent selector. You need it whenever the nested selector must attach directly to the parent rather than describe a descendant — pseudo-classes, modifier classes, and compound selectors:

.btn {
  background: #2563eb;

  &:hover { background: #1d4ed8; }   /* .btn:hover */
  &.is-active { background: #1e40af; } /* .btn.is-active */
}

Without the &, a bare :hover would be treated as a descendant: .btn *:hover, which is almost never what you want. When you write a nested selector that starts with an element or class (like p above), the browser implicitly inserts a descendant combinator for you.

Nesting media queries

You can nest @media (and other at-rules) inside a selector, keeping responsive tweaks next to the rule they modify:

.sidebar {
  width: 100%;

  @media (min-width: 768px) {
    width: 280px;
  }
}

Where it differs from Sass

The syntax looks like Sass, but the two are not identical. The differences that bite most often:

• Concatenation: Sass lets you build selectors like &__title (BEM). Native CSS nesting does not concatenate — &__title is invalid. You must write the full class name.
• No compile step: native nesting runs in the browser, so there is nothing to compile and no source maps to manage.
• Specificity of &: in native CSS, & behaves like :is() and takes the specificity of the most specific selector in the parent list, which can differ subtly from Sass output.

Browser support and fallback

Native CSS nesting is supported in current versions of Chrome, Edge, Firefox and Safari. Early implementations required the nested selector to start with a symbol (so you wrote & p instead of p); the relaxed syntax that allows a bare element selector is what ships in today's browsers. If you must support older engines, keep using Sass or PostCSS — the postcss-nesting plugin compiles native nesting down to flat CSS.

Quick reference

You want	Write
Descendant	.card { p { ... } }
Pseudo-class	&:hover { ... }
Modifier class	&.is-active { ... }
Responsive	@media (...) { ... } nested
BEM concatenation	not supported — write the full class

Native nesting removes one of the last big reasons to reach for a preprocessor on a new project. Keep the nesting shallow — two or three levels — and your stylesheets stay readable while the relationships between selectors stay obvious.