CSS nesting: SCSS-like but native (2023+)

Native nesting shipped in browsers

.card {
  padding: 16px;
  background: white;

  & h2 {
    margin: 0;
    color: #3B82F6;
  }

  & p {
    color: #71717A;
  }

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

  & .cta {
    background: #3B82F6;

    &:hover {
      background: #2563EB;
    }
  }
}

Looks like SCSS / Less. But it's now NATIVE CSS — no preprocessor needed.

The & is required (mostly)

.card {
  & h2 { ... }           /* descendant — & is required for clarity */
  &:hover { ... }        /* same-element state — & is required */
  & + .sibling { ... }   /* sibling combinator — & required */
  &.featured { ... }     /* same-element class — & required */
}

In some cases the & is implicit, but always-write-it is the safer rule.

When to nest

• Container + its own state (.card + &:hover)
• Container + its DIRECT children where the parent context matters

When NOT to nest

• Deep nesting (>2 levels). Read like a hostile maze.
• Crossing component boundaries. .page-header .card should NOT live inside .page-header — define .card once at the top level.

Browser support

Chrome / Edge 112+, Safari 16.5+, Firefox 117+. Shipped 2023. Safe everywhere in 2026.