diff --git a/css-nesting-1/Overview.bs b/css-nesting-1/Overview.bs index 98a2c01bf27..5b6bbec2216 100644 --- a/css-nesting-1/Overview.bs +++ b/css-nesting-1/Overview.bs @@ -203,8 +203,8 @@ Direct Nesting {#direct} & > .bar { color: red; } } /* equivalent to - .foo { color: blue; } - .foo > .bar { color: red; } + .foo { color: blue; } + .foo > .bar { color: red; } */ .foo { @@ -212,8 +212,8 @@ Direct Nesting {#direct} &.bar { color: red; } } /* equivalent to - .foo { color: blue; } - .foo.bar { color: red; } + .foo { color: blue; } + .foo.bar { color: red; } */ .foo, .bar { @@ -221,9 +221,80 @@ Direct Nesting {#direct} & + .baz, &.qux { color: red; } } /* equivalent to - .foo, .bar { color: blue; } - :is(.foo, .bar) + .baz, - :is(.foo, .bar).qux { color: red; } + .foo, .bar { color: blue; } + :is(.foo, .bar) + .baz, + :is(.foo, .bar).qux { color: red; } + */ + + .foo { + color: blue; + & .bar & .baz & .qux { color: red; } + } + /* equivalent to + .foo { color: blue; } + .foo .bar .foo .baz .foo .qux { color: blue; } + */ + + .foo { + color: blue; + & { padding: 2ch; } + } + /* equivalent to + .foo { color: blue; } + .foo { padding: 2ch; } + + // and + + .foo { + color: blue; + padding: 2ch; + } + */ + + .error, #404 { + &:not(.foo,.bar) > .baz { color: red; } + } + /* equivalent to + :is(.error, #404):not(.foo,.bar) > .baz { color: red; } + */ + + .foo { + &:is(.bar, &.baz) { color: red; } + } + /* equivalent to + .foo:is(.bar, .foo.baz) { color: red; } + */ + + figure { + margin: 0; + + & > figcaption { + background: hsl(0 0% 0% / 50%); + + & > p { + font-size: .9rem; + } + } + } + /* equivalent to + figure { margin: 0; } + figure > figcaption { background: hsl(0 0% 0% / 50%); } + figure > figcaption > p { font-size: .9rem; } + */ + + main { + & > section, + & > article { + background: white; + + & > header { + font-size: 1.25rem; + } + } + } + /* equivalent to + main > :is(section, article) { background: white; } + main > :is(section, article) > header { font-size: 1.25rem; } */ @@ -242,12 +313,19 @@ Direct Nesting {#direct} } /* Invalid because & isn't in the first compound selector */ + .foo { + color: red; + &&.bar { color: blue; } + } + /* Invalid because the second & is no longer + at the start of a compound selector */ + .foo { color: red; &.bar, .baz { color: blue; } } /* Invalid because the second selector in the list doesn't - contain a nesting selector. */ + contain a nesting selector. */ @@ -305,8 +383,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* equivalent to - .foo { color: red; } - .foo > .bar { color: blue; } + .foo { color: red; } + .foo > .bar { color: blue; } */ .foo { @@ -316,8 +394,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* equivalent to - .foo { color: red; } - .parent .foo { color: blue; } + .foo { color: red; } + .parent .foo { color: blue; } */ .foo { @@ -327,8 +405,8 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* equivalent to - .foo { color: red; } - :not(.foo) { color: blue; } + .foo { color: red; } + :not(.foo) { color: blue; } */ @@ -350,7 +428,7 @@ The Nesting At-Rule: ''@nest'' {#at-nest} } } /* Invalid because not all selectors in the list - contain a nesting selector */ + contain a nesting selector */