Title: CSS Nesting Module
Shortname: css-nesting
Level: 1
Status: ED
Work Status: Exploring
Group: CSSWG
ED: https://drafts.csswg.org/css-nesting/
Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
Abstract: This module introduces the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule. This increases the modularity and maintainability of CSS stylesheets.
Link Defaults: css-color-4 (property) color
Introduction
This section is not normative.
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.
Module Interactions
This module introduces new parser rules that extend the [[!CSS21]] parser model.
This module introduces selectors that extend the [[SELECTORS4]] module.
Values
This specification does not define any new properties or values.
Motivation
CSS Rules for even moderately complicated web pages include lots of duplication for the purpose of styling related content.
For example, here is a portion of the CSS markup for one version of the [[CSS3COLOR]] module:
table.colortable td {
text-align:center;
}
table.colortable td.c {
text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
border:1px solid black;
}
table.colortable th {
text-align:center;
background:black;
color:white;
}
Nesting allows the grouping of related style rules, 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;
}
}
Besides removing duplication,
the grouping of related rules improves the readability and maintainability of the resulting CSS.
Nesting Selector: the ''&'' selector {#nest-selector}
=====================================================
When using a nested style rule,
one must be able to refer to the elements matched by the parent rule;
that is, after all, the entire point of nesting.
To accomplish that,
this specification defines a new selector,
the nesting selector,
written as an ASCII ampersand &.
When used in the selector of a nested style rule,
the nesting selector represents the elements matched by the parent rule.
When used in any other context,
it represents nothing.
(That is, it's valid, but matches no elements.)
The
nesting selector can be desugared
by replacing it with the parent style rule's selector,
wrapped in a '':matches()'' selector.
For example,
a, b {
& c { color: blue; }
}
is equivalent to
:matches(a, b) c { color: blue; }
For example, given the following style rules:
#a, .b {
& c { color: blue; }
}
Then in a DOM structure like
<div id=a>
<c>foo</c>
</div>
the ''&'' selector has specificity [1,0,0]
because it matches due to the ''#a'' selector,
giving the entire ''color: blue'' rule a specificity of [1,0,1].
For example, the following nestings are valid:
.foo {
color: blue;
& > .bar { color: red; }
}
/* equivalent to
.foo { color: blue; }
.foo > .bar { color: red; }
*/
.foo {
color: blue;
&.bar { color: red; }
}
/* equivalent to
.foo { color: blue; }
.foo.bar { color: red; }
*/
.foo, .bar {
color: blue;
& + .baz, &.qux { color: red; }
}
/* equivalent to
.foo, .bar { color: blue; }
:matches(.foo, .bar) + .baz,
:matches(.foo, .bar).qux { color: red; }
*/
But the following are invalid:
.foo {
color: red;
.bar { color: blue; }
}
/* Invalid because there's no nesting selector */
.foo {
color: red;
.bar & { color:blue; }
}
/* Invalid because & isn't in the first compound selector */
.foo {
color: red;
&.bar, .baz { color: blue; }
}
/* Invalid because the second selector in the list doesn't
contain a nesting selector. */
@nest = @nest <> { <> }
The ''@nest'' rule functions identically to a style rule:
it starts with a selector,
and contains declarations that apply to the elements the selector matches.
The only difference is that the selector used in a ''@nest'' rule
must be nest-containing,
which means it contains a nesting selector in it somewhere.
A list of selectors is nest-containing if all of its individual complex selectors
are nest-containing.
For example, the following nestings are valid:
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
/* equivalent to
.foo { color: red; }
.foo > .bar { color: blue; }
*/
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
/* equivalent to
.foo { color: red; }
.parent .foo { color: blue; }
*/
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
/* equivalent to
.foo { color: red; }
:not(.foo) { color: blue; }
*/
But the following are invalid:
.foo {
color: red;
@nest .bar {
color: blue;
}
}
/* Invalid because there's no nesting selector */
.foo {
color: red;
@nest & .bar, .baz {
color: blue;
}
}
/* Invalid because not all selectors in the list
contain a nesting selector */
Mixing Nesting Rules and Declarations {#mixing}
-----------------------------------------------
A style rule can have any number of
nested style rules inside of it,
of either type,
intermixed with any number of declarations,
in any order.
The relative ordering of
nested style rules and other declarations
is important;
it's possible for a given style rule and a
nested style rule within it to match the same element,
and if the specificity of the two rules is otherwise equivalent,
the relative order in the stylesheet of the applicable declarations
determines which declaration "wins" the
cascade.
CSS Object Model Modifications {#cssom}
=======================================
1. Add an interface for the @nest rule.
2. Tie into the general work needed to let rules be nested into style rules.