Nesting selectors without Sass or Less
Selector nesting was the #1 reason people reached for Sass. It's now built into CSS. Same & syntax, zero build tools.
2.nav {
3 display: flex;
4 gap: 8px;
5
6 & a {
7 color: #888;
8 text-decoration: none;
9
10 &:hover {
11 color: white;
12 }
13 }
14}
2.nav {
3 display: flex;
4 gap: 8px;
5
6 & a {
7 color: #888;
8 text-decoration: none;
9
10 &:hover {
11 color: white;
12 }
13 }
14}
15// sass --watch nav.scss nav.css
Browser Support for CSS nesting
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Your first month is free
Managed WordPress hosting for faster sites.
No build step
Drop Sass, Less, PostCSS, or any compiler. Ship CSS directly to the browser, nesting included.
Familiar syntax
Same & nesting you already know from Sass. Near-zero learning curve for existing teams.
Smaller toolchain
One fewer dependency in your build. Faster installs, simpler CI, fewer things to break.
How it works
CSS nesting lets you write child selectors inside parent rule blocks using the & symbol, just like Sass. The browser interprets .nav { & a { … } } as .nav a { … }.
You can nest pseudo-classes (&:hover), pseudo-elements (&::before), and even media/container queries inside a rule block. The & always refers to the parent selector.
Unlike the initial release, the relaxed nesting syntax now matches Sass: you can write bare element selectors like a { color: red } directly inside a parent. The & is only required for compound selectors like &:hover or &.active.