is-where/index.html

<!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>