[css-nesting-1] adding more clarity to relative order examples

Author: Adam Argyle

css-nesting-1/Overview.bs

@@ -573,8 +573,8 @@ Mixing Nesting Rules and Declarations {#mixing}
 
     <pre class="lang-css">
     article {
-      & .blue { color: blue; }
-      & .red  { color: red; }
+      & .blue { color: blue; } /* (0,1,1) */
+      & .red  { color: red; }  /* (0,1,1) */
     }
 
     /* equivalent to
@@ -588,22 +588,50 @@ Mixing Nesting Rules and Declarations {#mixing}
       &#60;div class="red blue"&#62;&#60;/div&#62;
     &#60;/article&#62;
 
-    /* div text color is red */
+    &#60;!-- div text color is red --&#62;
     </pre>
 
-    and this follow up:
+    The specificity of ''article .blue'' and ''article .red'' is (0,1,1).
+
+    Now consider this follow up which adds an ID selector:
+
+    <pre class="lang-css">
+    article {
+      & .blue, & #gotcha { color: blue; } /* (1,1,1) */
+      & .red { color: red; }              /* (0,1,1) */
+    }
+
+    /* equivalent to
+     article :is(.blue, #gotcha) { 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 blue --&#62;
+    </pre>
+
+    ''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. 
+    
+
+    To work around it, the following could be written instead:
 
     <pre class="lang-css">
     article {
-      & .blue, & #gotcha { color: blue; }
-      & .red  { color: red; }
+      & .blue { color: blue; }    /* (0,1,1) */
+      & .red { color: red; }      /* (0,1,1) */
+      & #gotcha { color: blue; }  /* (1,0,1) */
     }
 
     /* equivalent to
-     article :is(.blue, #gotcha) {
-       color: blue;
-     }
+     article .blue { color: blue; }
      article .red { color: red; }
+     article #gotcha { color: blue; }
     */
     </pre>
 
@@ -612,14 +640,9 @@ Mixing Nesting Rules and Declarations {#mixing}
       &#60;div class="red blue"&#62;&#60;/div&#62;
     &#60;/article&#62;
 
-    /* div text color is blue */
+    &#60;!-- div text color is red --&#62;
     </pre>
 
-    specificities between ''.red'' and ''.blue'' 
-    no longer match because the equivalent internal representation of the nesting 
-    uses '':is()'', which becomes the specificity of it's highest selector. 
-    The convenience of nesting ''#gotcha'' and ''.blue'' together has joined 
-    their specificity, affecting the resolve style, making the color blue.
   </div>