Early March the first Editor’s Draft for the CSS Nesting Module was published. The draft outlines a future mechanism by which we’ll be able to nest CSS selectors natively (e.g. in pure CSS, without the use of any preprocessors)
This module describes support for nesting a style rule within another style rule, allowing the inner rule’s selector to reference the elements matched by the outer rule. This feature allows related styles to be aggregated into a single structure within the CSS document, improving readability and maintainability.
🤔 Editor's Draft?
A Editor's Draft (ED) is an unofficial version of a specification. They have no official standing, and do not necessarily imply consensus of the CSS Working Group. These Editor's Drafts can describe modules that are not part of the Recommendation Track yet, or can contain in-progress versions of Modules that already are part of the Rec Track.
If an Editor's Draft gets picked up by the CSSWG, a “First Public Working Draft” gets published. This makes the Module officially part of the Rec Track and marks the start of the Working Draft (WD) phase. From there on the proposal can advance further down the Recommendation Track.
In visual form, the Recommendation Track looks something like this:
See An Inside View of the CSS Working Group at W3C for more details on all phases.
UPDATE 2021.07.07: 🥳 The CSSWG has agreed to publish the First Public Working Draft of this module, making it part of the Recommendation Track! Things are getting official, folks!
Using the & selector (read this as “the nesting selector”), you can refer to the elements matched by the parent rule:
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;
}
}As it’s an actual selector, you always need to use the & selector, so you won’t be able to do this:
/* INVALID */
.foo {
.bar {
color: hotpink;
}
}(The fix would be to write & .bar instead of .bar)
The & selector can also only be used when it’s first compound selector (e.g. it appears at the first position) of an inner selector.
/* INVALID */
.foo {
.bar & {
color: hotpink;
}
}To cater to these scenarios you’ll need to use the @nest rule, which is more lax:
/* VALID */
.foo {
@nest .bar & {
color: hotpink;
}
}To me it feels like this @nest rule should go. The interpreter should be smart enough to figure things out all by itself.
Leave a comment