#CSS Nesting aims to give advanced users new ways to group and shorten style rules. It implements natively some of the features provided by preprocessors like #SASS or LESS #timetogiveinput
This tweet is unavailable
1
4
5
Besides removing duplication, the grouping of related rules improves the readability and maintainability of the resulting #CSS. The specification defines a new selector, the "nesting selector", written as an ASCII ampersand "&"

Aug 31, 2021 · 9:06 AM UTC

3
3
3
6
Please send feedback by filing #GitHub issues, incl. [css nesting] in the title: github.com/w3c/csswg-drafts/…
1
2
6
Replying to @w3cdevs
Can you post the actual code as alt text instead of a description of it? Thank you.
1
Here it is (thx for the nudge!): 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; } }
1
Replying to @w3cdevs
All true, of course, but a maintainability nightmare when some clown has nested everything 8 levels deep, using as many IDs as they can find. Selectors like freight trains.
1