[css-nesting-1] Define that declarations have to come before nested rules.

Author: tabatkins

css-nesting-1/Overview.bs

@@ -561,94 +561,101 @@ Nesting Conditional Rules {#conditionals}
 Mixing Nesting Rules and Declarations {#mixing}
 -----------------------------------------------
 
-	A style rule can have any number of <a>nested style rules</a> inside of it,
-	of either type,
-	intermixed with any number of declarations,
-	in any order.
+	A style rule can have any number of declarations inside of it,
+	followed by any number of rules.
+	Declarations occuring <em>after</em> a nested rule
+	are invalid.
 
-	The relative ordering of <a>nested style rules</a>, <a>nested conditional rules</a> and
-	other declarations <strong>is</strong> important;
-	it's possible for a given style rule and a <a>nested style rule</a> 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 <a>cascade</a>.
-
-	<div class="example">
-		For example, consider the following where the specificity is the same and the
-		cascade is used for value resolution:
+	<div class=example>
+		For example,
+		in the following code:
 
-		<pre class="lang-css">
+		<pre highlight=css>
 		article {
-			& .blue { color: blue; } /* (0,1,1) */
-			& .red  { color: red; }  /* (0,1,1) */
+			color: green;
+			& { color: blue; }
+			color: red;
 		}
-
-		/* equivalent to
-		 article .blue { color: blue; }
-		 article .red  { color: red; }
-		*/
-		</pre>
-
-		<pre class="lang-html">
-		&#60;article&#62;
-			&#60;div class="red blue"&#62;&#60;/div&#62;
-		&#60;/article&#62;
-
-		&#60;!-- div text color is red --&#62;
 		</pre>
 
-		The specificity of ''article .blue'' and ''article .red'' is (0,1,1).
+		The ''color: red'' declaration is invalid and ignored,
+		since it occurs after the [=nested style rule=].
 
-		Now consider this follow up which adds an ID selector:
+		However, further nested rules are still valid,
+		as in this example:
 
-		<pre class="lang-css">
+		<pre highlight=css>
 		article {
-			& .blue, & #gotcha { color: blue; } /* (1,1,1) */
-			& .red { color: red; }              /* (0,1,1) */
+			color: green;
+			& { color: blue; }
+			color: red;
+			&.foo { color: yellow; } /* valid! */
 		}
-
-		/* equivalent to
-		 article :is(.blue, #gotcha) { color: blue; }
-		 article .red { color: red; }
-		*/
 		</pre>
+	</div>
 
-		<pre class="lang-html">
-		&#60;article&#62;
-			&#60;div class="red blue"&#62;&#60;/div&#62;
-		&#60;/article&#62;
+	The relative ordering of <a>nested style rules</a> and <a>nested conditional rules</a>
+	<strong>is</strong> important;
+	it's possible for a given style rule and a <a>nested style rule</a> 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 <a>cascade</a>.
+	For this purpose,
+	a nested rule is considered to come <em>after</em> its parent rule.
 
-		&#60;!-- div text color is blue --&#62;
-		</pre>
+	<div class="example">
+		For example, consider the following where the specificity is the same and the
+		cascade is used for value resolution:
 
-		''article :is(.blue, #gotcha)'' now has a specificity score of (1,1,1).
-		Nesting uses '':is()'' which assumes the specificity of it's highest selector.
+		<xmp class="lang-css">
+			article {
+				& .blue { color: blue; } /* (0,1,1) */
+				& .red  { color: red; }  /* (0,1,1) */
+			}
 
+			/* equivalent to
+			 article .blue { color: blue; }
+			 article .red  { color: red; }
+			*/
+		</xmp>
 
-		To work around it, the following could be written instead:
+		<xmp class="lang-html">
+			<article>
+				<div class="red blue"></div>
+			</article>
 
-		<pre class="lang-css">
-		article {
-			& .blue { color: blue; }    /* (0,1,1) */
-			& .red { color: red; }      /* (0,1,1) */
-			& #gotcha { color: blue; }  /* (1,0,1) */
-		}
+			<!-- div text color is red -->
+		</xmp>
 
-		/* equivalent to
-		 article .blue { color: blue; }
-		 article .red { color: red; }
-		 article #gotcha { color: blue; }
-		*/
-		</pre>
+		The specificity of ''article .blue'' and ''article .red'' are both (0,1,1).
+	</div>
 
-		<pre class="lang-html">
-		&#60;article&#62;
-			&#60;div class="red blue"&#62;&#60;/div&#62;
-		&#60;/article&#62;
+	<div>
+		In this example:
 
-		&#60;!-- div text color is red --&#62;
-		</pre>
+		<xmp highlight=css>
+			article {
+				color: blue;
+				& { color: red; }
+			}
+		</xmp>
+
+		Both declarations have the same specificity (0,0,1),
+		but the nested rule is considered to come <em>after</em> its parent rule,
+		so the ''color: red'' declarations wins.
+
+		On the other hand, in this example:
+
+		<xmp highlight=css>
+			article {
+				color: blue;
+				:where(&) { color: red; }
+			}
+		</xmp>
 
+		The '':where()'' pseudoclass reduces the specificity of the [=nesting selector=] to 0,
+		so the ''color: red'' declaration now has a specificity of (0,0,0),
+		and loses to the ''color: blue'' declaration.
 	</div>