[css-nesting-1] adds relative order example with a tricky :is()

Author: argyleink

css-nesting-1/Overview.bs

@@ -567,6 +567,61 @@ Mixing Nesting Rules and Declarations {#mixing}
 	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:
+
+    <pre class="lang-css">
+    article {
+      & .blue { color: blue; }
+      & .red  { 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;
+
+    /* div text color is red */
+    </pre>
+
+    and this follow up:
+
+    <pre class="lang-css">
+    article {
+      & .blue, & #gotcha { color: blue; }
+      & .red  { color: red; }
+    }
+
+    /* 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;
+
+    /* div text color is blue */
+    </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>
+
 
 CSS Object Model Modifications {#cssom}
 =======================================