CSS Nesting

ELI5 — The Vibe Check

CSS Nesting finally brings the one feature everyone used Sass for directly into plain CSS. Nest selectors inside each other, just like you've been doing in preprocessors for a decade. The browsers caught up and Sass is sweating.

Real Talk

CSS Nesting is a native CSS feature that allows selectors to be nested within other selectors, reducing repetition and improving readability. It follows the same logical structure as preprocessors like Sass, using the & selector for parent references, now supported natively in modern browsers.

Show Me The Code

.card {
  background: white;
  & .title {
    font-size: 1.5rem;
  }
  &:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
}

When You'll Hear This

"CSS nesting is native now, do we even need Sass anymore?" / "The & syntax works just like Sass, finally"