CSS Nesting Explained

For years, writing nested selectors in CSS — styling a child element inside its parent's own rule block — meant reaching for a preprocessor like Sass or Less. That's no longer true. Native CSS nesting is now supported directly by browsers, letting you group related styles together without any build step.

Flat CSS vs Nested CSS

Here's a small component styled the traditional, flat way — every selector repeats the parent class name:

.card {
  padding: 1rem;
  border-radius: 8px;
}

.card h3 {
  margin: 0 0 0.5rem;
}

.card p {
  color: #555;
}

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

And here's the exact same result using native CSS nesting:

.card {
  padding: 1rem;
  border-radius: 8px;

  h3 {
    margin: 0 0 0.5rem;
  }

  p {
    color: #555;
  }

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

Everything related to .card now lives visually inside one block, which makes it much easier to scan a stylesheet and see exactly what belongs to what — especially once a component has a dozen related rules instead of just four.

The & Parent-Reference Selector

Notice the &:hover line above. When nesting a selector that needs to attach directly to the parent — a pseudo-class, a modifier class, anything without implied whitespace — you use & to stand in for "the parent selector, right here." Without it, :hover { ... } inside .card would be interpreted as "style any element matching :hover that happens to be inside a .card," which is a completely different (and usually wrong) selector.

.btn {
  background: #2563eb;

  &.btn--danger {
    background: #dc2626;
  }

  & + & {
    margin-left: 0.5rem;
  }
}

The second rule here, & + &, is a neat trick for adding spacing between adjacent buttons without needing a wrapper or a utility class — it reads as "a .btn that immediately follows another .btn."

Nesting Media Queries Too

.sidebar {
  width: 250px;

  @media (max-width: 768px) {
    width: 100%;
  }
}

This keeps a component's responsive behavior right next to its base styles instead of scattered in a separate media query block far down the stylesheet.

Browser Support

Native CSS nesting is supported in all current versions of Chrome, Edge, Safari, and Firefox as of 2026. If your project already uses Sass for other reasons, there's no urgency to switch — Sass nesting compiles down to the same flat CSS and works identically. But for a plain CSS project, native nesting now gets you the same organizational benefit with zero build tooling.

---