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.
Syntax
/* Usage Example */
.card {
padding: 1rem;
/* Native CSS nesting! */
h2 {
color: blue;
}
&:hover {
background: #f0f0f0;
}
}
CSS Nesting (&) Browser support
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+