CSS Nesting (&) | CSS Selectors & Pseudo-classes

Allows you to write CSS rules inside of other rules. This makes your code more organized and mirrors the structure of your HTML.

Quick example

.card {
  padding: 1rem;

  /* Native CSS nesting! */
  h2 {
    color: blue;
  }

  &:hover {
    background: #f0f0f0;
  }
}

Widely availableSince 202391% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2023.

Safe to use without fallbacks.

120+

117+

17.2+

120+