Merge pull request w3c#5616 from w3c/css-nesting-1]-more-examples

Author: tabatkins

css-nesting-1/Overview.bs

@@ -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>
 
@@ -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>
 
@@ -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; }
 		 */
 		</pre>
 
@@ -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>