[css-nesting] example nits and updates

Author: Adam Argyle

css-nesting-1/Overview.bs

@@ -235,6 +235,17 @@ Direct Nesting {#direct}
 		   .foo .foo .bar .foo .baz .foo .qux { color: blue; }
 		 */
 
+		.foo {
+			color: blue;
+			& { padding: 2ch; }
+		}
+		/* equivalent to
+		   .foo { 
+		   	 color: blue; 
+		   	 padding: 2ch;
+		   }
+		 */
+
 		.error, #404 {
 			&:not(.foo,.bar) > .baz { color: red; }
 		}
@@ -246,28 +257,31 @@ Direct Nesting {#direct}
 			&:is(.bar, &.baz) { color: red; }
 		}
 		/* equivalent to
-		   .foo:is(.bar, .foo:is(.baz)) { color: red; }
+		   .foo:is(.bar, .foo.baz) { color: red; }
 		 */
 
-		main {
-			display: grid;
-			& > section {
-				background: white;
-				& > header {
-					font-size: 1.25rem;
+		figure {
+			margin: 0;
+
+			& > figcaption {
+				background: hsl(0 0% 0% / 50%);
+
+				& > p {
+					font-size: .9rem;
 				}
 			}
 		}
 		/* equivalent to
-		   main { display: grid; }
-		   main > section { background: white; }
-		   main > section > header { font-size: 1.25rem; }
+		   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;
 				}
@@ -296,17 +310,17 @@ Direct Nesting {#direct}
 
 		.foo {
 			color: red;
-			&.bar, .baz { color: blue; }
+			&&.bar { color: blue; }
 		}
-		/* Invalid because the second selector in the list doesn't
-		   contain a nesting selector. */
+		/* Invalid because the 1st & is no longer 
+		   at the start of a nesting selector */
 
 		.foo {
 			color: red;
-			&&.bar { color: blue; }
+			&.bar, .baz { color: blue; }
 		}
-		/* Invalid because the 1st & is no longer 
-		   at the start of a selector */
+		/* Invalid because the second selector in the list doesn't
+		   contain a nesting selector. */
 		</pre>
 	</div>