🪺 CSS Nesting cheatsheet

This cheatsheet continues from CSS Selectors & combinators article. At the end of the article, you can find the sources with the detailed documentation.

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

☝️ This feature is available on most popular browsers since the last quarter of 2023.

& nesting selector

It makes nested child rule selectors relative to the parent element. Without the & nesting selector the child rule selector selects child elements.

parentRule {
  /* parent rule style properties */
  & childRule {
    /* child rule style properties */
  }
}

CSS nesting allows us to define styles for an element within the context of another selector:

.parent {
  color: blue;

  .child {
     color: red;
   }
}

The same example written with the & symbol where we explicitly signify where the parent class should be placed:

.parent {
  color: blue;

  & .child {
    color: red;
  }
}

Examples

<div class="demo">
  <div class="sm triangle pink"></div>
  <div class="sm triangle blue"></div>
  <div class="square blue"></div>
  <div class="sm square pink"></div>
  <div class="sm square blue"></div>
  <div class="circle pink"></div>
  …
</div>

// Add styles to fade and blur just the circles inside the demo

// No nesting
.demo .circle {
  opacity: .25;
  filter: blur(25px);
}

// With nesting
/* & + " " space is added for you */
.demo {
  .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

// With nesting and &
.demo {
  & .circle {
    opacity: .25;
    filter: blur(25px);
  }
}

// Select any triangles and squares

// No nesting
.demo .triangle,
.demo .square {
  opacity: .25;
  filter: blur(25px);
}
/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

// With nesting
.demo {
  .triangle, .square {
    opacity: .25;
    filter: blur(25px);
  }
}

// With nesting and &
.demo {
  & .triangle,
  & .square {
    opacity: .25;
    filter: blur(25px);
  }
}

The following example requires a compound selector as the elements need both classes (large and triangle or square) to be selected:

// Select large triangles and circles

// Without nesting (option 1)
.demo .lg.triangle,
.demo .lg.square {
  opacity: .25;
  filter: blur(25px);
}

// Without nesting (option 2)
.demo .lg:is(.triangle, .circle) {
  opacity: .25;
  filter: blur(25px);
}

// With nesting
.demo {
  .lg.triangle,
  .lg.circle {
    opacity: .25;
    filter: blur(25px);
  }
}

// With nesting and &
.demo {
  .lg {
    &.triangle,
    &.circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

☝️ If we don’t explicitly specify a compound selector and nest the example like this:

.demo {
  .lg {
    .triangle,
    .circle {
      opacity: .25;
      filter: blur(25px);
    }
  }
}

We won’t get the expected result. We need to use & to specify the desired outcome of .lg.triangle, .lg.circle compounded together.

The actual result would be .lg .triangle, .lg .circle; as descendant selectors.

<p class="example">
  This paragraph <a href="#">contains a link</a>, try hovering or focusing it.
</p>

// Without nesting
.example {
  font-family: system-ui;
  font-size: 1.2rem;
}
.example > a {
  color: tomato;
}
.example > a:hover,
.example > a:focus {
  color: ivory;
  background-color: tomato;
}

// With nesting and &
.example {
  font-family: system-ui;
  font-size: 1.2rem;
  & > a {
    color: tomato;
    &:hover,
    &:focus {
      color: ivory;
      background-color: tomato;
    }
  }
}

Sources

CSS Nesting | Chrome for Developers

CSS nesting - CSS: Cascading Style Sheets | MDN

& nesting selector - CSS: Cascading Style Sheets | MDN