adding simple example to explain the difference between :is and :where

chrisdavidmills · chrisdavidmills · commit 6949e7576b70 · 2020-05-18T14:23:05.000+01:00
diff --git a/is-where/is-where-example.html b/is-where/is-where-example.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>:is() and :where(), examples and differences</title>
+
+    <style>
+     html {
+       font-family: sans-serif;
+       font-size: 200%;
+     }
+
+     :is(section.is-styling, aside.is-styling, footer.is-styling) a {
+       color: red;
+     }
+
+     :where(section.where-styling, aside.where-styling, footer.where-styling) a {
+       color: orange;
+     }
+
+     footer a {
+       color: blue;
+     }
+
+
+    </style>
+  </head>
+
+  <body>
+    <article>
+      <h2>:is()-styled links</h2>
+      <section class="is-styling">
+        <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
+      </section>
+
+      <aside class="is-styling">
+        <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+      </aside>
+
+      <footer class="is-styling">
+        <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+      </footer>
+    </article>
+
+    <article>
+      <h2>:where()-styled links</h2>
+      <section class="where-styling">
+        <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
+      </section>
+
+      <aside class="where-styling">
+        <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
+      </aside>
+
+      <footer class="where-styling">
+        <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
+      </footer>
+    </article>
+
+  </body>
+
+</html>
