CSS Nesting (&)

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

/* Usage Example */
.card {
  padding: 1rem;

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

  &:hover {
    background: #f0f0f0;
  }
}

This comparison shows how CSS Nesting (&) works in a real project. View snippet →

Newly available Since 2023 86% global usage

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

120+
117+
17.2+
120+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC