There is now a CSS Nesting Module in the CSS specification. The module is currently a Working Draft and CSS nesting is supported in all major browsers.
The syntax looks like this:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Guides › Nesting › Using
Using CSS nesting - CSS | MDN
November 7, 2025 - In CSS preprocessors such as Sass, it is possible to use nesting to join strings to create new classes.
Chrome Developers
developer.chrome.com › docs › css-ui › css-nesting
CSS Nesting | Chrome for Developers
March 8, 2023 - This task requires a compound selector, where elements must have both classes present in order to be selected. ... The & symbol is your friend here as it shows explicitly how to adjoin nested selectors.
Naming nested css classes
Look up BEM More on reddit.com
10
14
July 16, 2022css selectors - Nesting CSS classes - Stack Overflow
Rather than constructing long selector ... simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter. ... alright. Thanks. I'm using JQuery anyways, so i'll use that. I was just hoping to use css because then if I dynamically add another pice of html with class2, for example, ... More on stackoverflow.com
Help choose the syntax for CSS Nesting
Also: it would allow things like ".a { &.b { x: y; } }" (which would be equivalent to ".a.b { x: y; }") to be clearly differentiated from ".a { & .b { x: y; } }" (which would be equivalent to ".a .b { x: y; }"). Just ".a { .b { x: y; } }" looks ambiguous between the two, since it doesn't "look ... More on news.ycombinator.com
159
103
December 19, 2022Use nested SASS classes with css modules
You cannot nest classes with SASS (or CSS) modules like you have it. More on github.com
7
14
March 30, 2021Is CSS Nesting safe to use in production?
Yes. CSS Nesting is supported in Chrome 120+, Edge 120+, Firefox 117+, and Safari 17.2+, covering well over 90% of global browser usage. As of 2026, it is part of the web platform Baseline. If you need to support very old browsers, you can use @supports selector(&) for feature detection or a PostCSS plugin as a fallback.
savvy.co.il
savvy.co.il › blog › css & design › native css nesting: a complete guide with examples
Native CSS Nesting: A Complete Guide with Examples | Savvy
Do I still need a CSS preprocessor like Sass if I use CSS Nesting?
For nesting alone, no. Native CSS Nesting covers the most common use case that drove developers to Sass. However, Sass still offers features like variables with logic, mixins, loops, and functions that native CSS does not fully replicate. If you only used Sass for nesting, you can likely drop it.
savvy.co.il
savvy.co.il › blog › css & design › native css nesting: a complete guide with examples
Native CSS Nesting: A Complete Guide with Examples | Savvy
Is the & (ampersand) required in CSS Nesting?
No. Since the relaxed syntax update (late 2023), the & is optional for simple descendant selectors. You can write .card { h1 { ... } } directly. The is still needed when appending to the parent selector (e.g., &.active, &:hover) or when placing the parent in a non-default position (e.g., .dark &).
savvy.co.il
savvy.co.il › blog › css & design › native css nesting: a complete guide with examples
Native CSS Nesting: A Complete Guide with Examples | Savvy
Videos
04:52
STOP Writing Old CSS: How to Use Nesting (&) Like a Pro - YouTube
Why I stopped using CSS Nesting... - YouTube
27:14
Getting started with CSS nesting - YouTube
CSS Nesting in 5 minutes - YouTube
01:00
Finally, CSS Nesting Without SASS #shorts - YouTube
11:16
How To Use Nesting In Plain CSS - YouTube
LogRocket
blog.logrocket.com › home › native css nesting: what you need to know
Native CSS nesting: What you need to know - LogRocket Blog
June 4, 2024 - You can use Stylelint to keep your nesting in check. Use classes with descriptive names as much as possible. When nesting styles in CSS, any styles you define after nested selectors will be ignored.
Reddit
reddit.com › r/webdev › naming nested css classes
r/webdev on Reddit: Naming nested css classes
July 16, 2022 -
I'm having a hard time choosing names for classes.
Is it bad practice to name nested classes like this (It's just an example)
<div class="game-list">
<div class="game-list-item">
<div class="game-list-item-metadata"></div>
<div class="game-list-item-content"></div>
</div>
</div>I want to have access to every element to design them separately
SitePoint
sitepoint.com › blog › css › an introduction to native css nesting
An Introduction to Native CSS Nesting — SitePoint
November 7, 2024 - Native nesting wraps parent selectors in :is(), and this can lead to differences with Sass output. ... A .child1 element inside .parent1 has a specificity of 101, because :is() uses the specificity of its most specific selector — in this case, the #parent2 ID. ... In this case, a .child1 element inside .parent1 has a specificity of 002, because it matches the two classes (#parent2 is ignored).
Netlify
itf-full-stack-essentials.netlify.app › css-bootstrap › css_nesting.html
CSS Nesting | Full Stack Essentials
The & selector is a special character used in CSS nesting to represent the parent selector. It provides greater control over the relationship between nested rules and is useful in many cases. Using the & selector is not always necessary, especially when using descendant selectors, but there are several situations where the & is required, such as when using pseudo-classes, pseudo-elements, and custom classes.
Top answer 1 of 8
94
There is now a CSS Nesting Module in the CSS specification. The module is currently a Working Draft and CSS nesting is supported in all major browsers.
The syntax looks like this:
table.colortable {
& td {
text-align:center;
&.c { text-transform:uppercase }
&:first-child, &:first-child + td { border:1px solid black }
}
& th {
text-align:center;
background:black;
color:white;
}
}
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
2 of 8
78
Not possible with vanilla CSS. However you can use something like:
- Sass
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Or
- Less
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
Example:
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Frank M Taylor
blog.frankmtaylor.com › 2024 › 07 › 18 › css-nesting-the-is-pseudo-class-and-a-guide-to-panicking-about-sass
CSS Nesting, the :is() pseudo-class, and a guide to panicking about Sass – Frank M Taylor
January 6, 2026 - CSS nesting mechanism works by matching actual parent elements and the :is() mechanism · You can’t form part of a class name like you could in Sass:
Savvy
savvy.co.il › blog › css & design › native css nesting: a complete guide with examples
Native CSS Nesting: A Complete Guide with Examples | Savvy
February 23, 2026 - You can nest pseudo-classes (e.g., :hover, :focus) and pseudo-elements (e.g., ::after, ::before) within your rules to style specific states or elements. ... Media queries can be nested within a selector to define responsive styles that stay ...
Let's Build UI
letsbuildui.dev › articles › nesting-in-css
Nesting in CSS
September 4, 2023 - When using compound selectors in nested CSS you have to use the & nesting selector. This is because the browser will automatically add whitespace between selectors that do not use the & nesting selector. - MDN Docs · Let’s say we have a navigation with anchors that receive an active class.
W3C
w3.org › TR › css-nesting-1
CSS Nesting Module Level 1
January 22, 2026 - Some CSS-generating tools that preprocess nesting will concatenate selectors as strings, allowing authors to build up a single simple selector across nesting levels. This is sometimes used with hierarchical name patterns like BEM to reduce repetition across a file, when the selectors themselves have significant repetition internally. For example, if one component uses the class .foo, and a nested component uses .fooBar, you could write this in Sass as:
Hacker News
news.ycombinator.com › item
Help choose the syntax for CSS Nesting | Hacker News
December 19, 2022 - Also: it would allow things like ".a { &.b { x: y; } }" (which would be equivalent to ".a.b { x: y; }") to be clearly differentiated from ".a { & .b { x: y; } }" (which would be equivalent to ".a .b { x: y; }"). Just ".a { .b { x: y; } }" looks ambiguous between the two, since it doesn't "look ...
FED Mentor
fedmentor.dev › posts › sass-nesting
Mastering sass nesting: Benefits, drawbacks, and my top tips - FED Mentor
August 6, 2023 - Sass nesting simply means placing selectors inside each other. It's a way of writing CSS selectors that is a little shorter, and places more emphasis on the parent-child relationships.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Selectors › Nesting_selector
& nesting selector - CSS | MDN
When the browser parses the nested selectors, it automatically adds whitespace between the selectors to create a new CSS selector rule. The following code shows the equivalent non-nested rules: ... .parent-rule { /* parent rule style properties */ } .parent-rule .child-rule { /* style properties for .child-rule descendants for .parent-rule ancestors */ } When the nested rule needs to be attached (with no whitespace) to the parent rule, such as when using a pseudo-class or creating compound selectors, the & nesting selector must be immediately prepended to achieve the desired effect.
Piccalilli
piccalil.li › blog › css-nesting-use-with-caution
CSS nesting: use with caution - Piccalilli
January 30, 2025 - That comes from lots of experience of lots of different codebases in my years as a CSS consultant. I’m a stickler for learning from mistakes. I know I’m not going to convert nesting fans today. What I hope to send you away with is at least a more cautious approach. Consider keeping your nesting shallow, for example. ... This is a nice, single purpose, shallow nested :hover pseudo-class that’s fairly scannable.
Creatures
creatures.sh › blog › getting-started-with-css-nesting
Getting started with CSS Nesting | creatures.sh
August 12, 2023 - Some of them are used for selectors, pseudo-classes and pseudo-elements, combinators, attribute selectors etc… · If the parser finds a nested selector that doesn’t start with any of these symbols, it will fail to parse it, which will result in incorrect styles. Nesting is a great feature that can help us write more maintainable CSS...
Cloud Four
cloudfour.com › thinks › when-to-nest-css
When to Nest CSS – Cloud Four
October 5, 2023 - As a result, our rule of thumb for nesting CSS selectors is if a selector will work without being nested, then do not nest it. ... Of course, there are some selectors that must be nested to work properly. Pseudo-classes, pseudo-elements, and certain modifier classes (like .is-active).
Bootstrap
getbootstrap.com › docs › 3.4 › css
CSS · Bootstrap
Remove the default list-style and left margin on list items (immediate children only). This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
W3Schools
w3schools.com › cssref › sel_nesting.php
CSS Nesting (&) Selector
The CSS nesting (&) selector is used to apply styles for an element within the context of another element.