<header class="header">
  <div class="header__title">
    <h1>
      <code>nth-last-child()</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/:nth-last-child">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_selectors_nth-last-child">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we are using a declaration of <code>nth-last-child(-n+3)</code> to select the last three list items in the unordered list and change their font family and color:
    </p>
    <p>
      Try changing <code>(3)</code> to <code>(6)</code> in this Pen's CSS to select the last 6 items in the unordered list instead.
    </p>
    <div class="example__demo example__demo--nth-last-child">
      <h2>Types of bears:</h2>
      <ul>
        <li>North American black bears</li>
        <li>Brown bears</li>
        <li>Polar bears</li>
        <li>Asiatic black bears</li>
        <li>Spectacled bears</li>
        <li>Panda bears</li>
        <li>Sloth bears</li>
        <li>Sun bears</li>
      </ul>
    </div>
  </div>
</main>

// Demo
.example__demo--nth-last-child {
  li:nth-last-child(-n+3) {
    color: var(--color-hibiscus);
    font-family: 'Gloria Hallelujah', cursive;
    margin-left: 0.25em;
  }
}


// Pen Setup
.example__demo--nth-last-child {
  h2,
  ul {
    color: var(--color-cinder);
  }

  h2 {
    margin-top: 0;
  }
  
  ul {
    margin-bottom: 0;
    font-size: var(--size-epsilon);
  }
}