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

<main>
  <div class="example">
    <p>
      In this example, we are targeting the second fish image (two fish) by starting from the last image (blue fish) and counting backwards. Since we're targeting images using <code>img</code> element selector, our declaration will skip over anything in the DOM that does not use an <code>img</code> element when counting.
    </p>
    <p>
    <p>
      Try changing <code>(3)</code> to <code>(2)</code> in this Pen's CSS to target the red fish instead. You'll know it's working if there's a blue background applied to it!
    </p>

    <div class="example__demo example__demo--nth-last-of-type">

      <h2 class="fish__name">one fish</h2>
      <img 
        class="fish__image fish__image--one-fish" 
        alt="An illustration of a white fish with a dopey smile on its face." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/seuss-one-fish.png" />
      
      <h2 class="fish__name">two fish</h2>
      <img 
        class="fish__image fish__image--two-fish" 
        alt="An illustration of two green fish swimming next to each other, each with the same proud expression." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/seuss-two-fish.png" />
      
      <h2 class="fish__name">red fish</h2>
      <img 
        class="fish__image fish__image--red-fish" 
        alt="An illustration of a red fish with a casual smile on its face and long eyelashes." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/seuss-red-fish.png" />
      
      <h2 class="fish__name">blue fish</h2>
      <img 
        class="fish__image fish__image--blue-fish" 
        alt="An illustration of a blue fish facing out toward the screen and postured to look like it is standing upright." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/seuss-blue-fish.png" />

    </div>
  </div>
  
  <aside>
    <p>
      <small>Fish images are from <a href="https://en.m.wikipedia.org/wiki/One_Fish,_Two_Fish,_Red_Fish,_Blue_Fish"><i>One Fish, Two Fish, Red Fish, Blue Fish</i></a>, by Dr. Seuss.</small>
    </p>
  </aside>
</main>

// Demo
img:nth-last-of-type(3) {
  background-color: var(--color-cerulean);
}


// Pen Setup
.example__demo--nth-last-of-type {
  background-color: #fcec13;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fish__name {
  color: var(--color-charade);
  font-family: 'Passion One', cursive;
  font-size: 3rem;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: -0.75rem;
  z-index: 1;
}

.fish__image {
  padding: 0.5rem;
  width: 15rem;
}

.fish__image--one-fish {
  position: relative;
    left: 3rem;
    bottom: 2rem;
  transform: rotate(10deg);
}

.fish__image--two-fish {
  transform: rotate(20deg);
  margin-bottom: 3rem;
}

.fish__image--red-fish {
  position: relative;
    right: 2rem;
    bottom: 1.25rem;
  transform: rotate(20deg);
}

.fish__image--blue-fish {
  position: relative;
    right: 1rem;
  width: 13rem;
}