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;
  }
}

Newly available Since 2023 91% global usage

Since 2023 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Works in all modern browsers. May need a fallback for older browsers.

120+

117+

17.2+

120+