Native CSS Nesting
Write nested CSS rules without a preprocessor using the native CSS nesting specification.
What is CSS Nesting?
Native CSS Nesting (baseline 2024, all modern browsers) allows writing CSS rules inside other rules, mirroring the nesting syntax previously available only in Sass/Less preprocessors. Nested rules automatically inherit the parent selector's context.
Basic Nesting Syntax
Write child selectors inside a parent rule block. The browser automatically combines parent and child selectors. A & (nesting selector) explicitly references the parent selector for modifiers and pseudo-classes.
.card {
padding: 1rem;
.title { font-size: 1.25rem; }
&:hover { box-shadow: var(--shadow-md); }
&.is-active { border-color: var(--color-primary); }
}