Skip to content

[css-nesting] additional examples #5616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 16, 2020
Merged

[css-nesting] additional examples #5616

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c7793d9
[css-nesting] added a :not, :is, and && error sample
Oct 13, 2020
4912191
[css-nesting] adds 2 3 level nest examples
Oct 14, 2020
6fdc24f
[css-nesting] feedback updates
Oct 14, 2020
b4771e1
[css-nesting] example nits and updates
Oct 15, 2020
991b34c
[css-nesting] fixes extra class
Oct 16, 2020
b4fae7c
[css-nesting] clarifications
Oct 16, 2020
dc3dec9
[css-nesting] normalizing to tabs
Oct 16, 2020
bd03403
[css-nesting] correction to invalid explainer
Oct 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 93 additions & 15 deletions css-nesting-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,27 +203,98 @@ Direct Nesting {#direct}
& > .bar { color: red; }
}
/* equivalent to
.foo { color: blue; }
.foo > .bar { color: red; }
.foo { color: blue; }
.foo > .bar { color: red; }
*/

.foo {
color: blue;
&.bar { color: red; }
}
/* equivalent to
.foo { color: blue; }
.foo.bar { color: red; }
.foo { color: blue; }
.foo.bar { color: red; }
*/

.foo, .bar {
color: blue;
& + .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; }
*/
</pre>

Expand All @@ -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. */
</pre>
</div>

Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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; }
*/
</pre>

Expand All @@ -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 */
</pre>
</div>

Expand Down