CSS Nesting

CSS Nesting

Native nesting, Baseline widely available since June 2026, puts child rules inside a parent rule as Sass 22,539 (Sass Syntax) does, with no build step. & stands for the parent selector; a nested selector without it is a descendant.

Nested rules and what they meanCSS

.card {
  padding: 1rem;
  h3 { margin: 0; }                      /* .card h3 */
  > img { width: 100%; }                 /* .card > img */
  &:hover { background: #e3f2fd; }       /* .card:hover (no space) */
  &.featured { border-color: #1565c0; }  /* .card.featured */
  .dark & { background: #263238; }       /* .dark .card */
  @media (width >= 40rem) { padding: 2rem; }
}

Two differences from Sass catch migrating developers. & is not text substitution, so BEM-style &__title is invalid. And & behaves like :is(): in #main, .side { & p {} } every match weighs 1-0-1, even a <p> inside .side. Nest two or three levels at most, or selectors grow long and hard to override.

MENU