Typically, when nesting CSS, one would utilize .scss or .sass along with a compiler tool to generate standard .css files. However, since December 2023, this feature has been natively supported across the latest browser versions.
Browser support:
- Chrome
>= 120 - Edge
>= 120 - Firefox
>= 117 - Safari
>= 17.2
It’s perfectly acceptable to write CSS in this manner without the need for a compiler tool, as modern browsers can interpret it seamlessly.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}Learn more about nesting selectors here.
Discover other useful CSS snippets for 2024 in this post.
It covers:
:has()subgridnestingtext-wrap: balancetext-wrap: prettycqw