<header class="header">
  <div class="header__title">
    <h1>
      <code>lang()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:lang">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_selectors_lang">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, the quotation marks for each quote are generated by the <code>lang</code> attribute applied to each quote's wrapping <code>p</code> element:
    </p>
    <div class="example__demo example__demo--lang">
      <p lang="en">
        <q>English quote</q>
      </p>
      <p lang="fr">
        <q>French quote</q>
      </p>
      <p lang="ko">
        <q>Korean quote</q>
      </p>
    </div>
  </div>

  <aside>
    <p>
      <small>Here is <a href="https://www.tutorialrepublic.com/html-reference/html-language-codes.php">a good starting list for language codes</a>.</small>
    </p>
  </aside>
</main>

.example__demo--lang {
  font-size: var(--size-epsilon);
  
  // English
  p:lang(en) {
    color: var(--color-jaffa);
    quotes: "\201C" "\201D" "\2018" "\2019" "\201C" "\201D" "\2018" "\2019";
  }

  // French
  p:lang(fr) {
    color: var(--color-hibiscus);
    quotes: "\00AB" "\00BB" "\201C" "\201D" "\00AB" "\00BB" "\201C" "\201D";
  }

  // Korean
  p:lang(ko) {
    color: var(--color-fern);
    quotes: "\300C" "\300D" "\300E" "\300F" "\300C" "\300D" "\300E" "\300F";
  }
}