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

<main>
  <div class="example">
    <p>
      In this example, we are targeting the thrid planet's name (Earth) by using a declaration of <code>:nth-of-type(3)</code> on the <code>h2</code> element selector. When Earth has been targeted, we can then apply custom font styling to make it stand out.
    </p>
    <p>
      Try changing <code>(3)</code> to <code>(2)</code> in this Pen's CSS to target Venus instead!
    </p>

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

      <h2 class="planet__name">Mercury</h2>
      <img 
        class="planet__emoji planet__emoji--mercury"
        alt="Mercury emoji."
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-mercury.png" />
      <p class="planet__description">Mercury is the smallest planet in the Solar System. It is the closest planet to the sun, and makes one trip around the Sun once every 87.969 days.</p>
      
      <h2 class="planet__name">Venus</h2>
      <img 
        class="planet__emoji planet__emoji--venus" 
        alt="Venus emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-venus.png" />
      <p class="planet__description">Venus is the second planet from the sun. It has a day longer than a year, and the year length of Venus is 225 Earth days. The day length of Venus is 243 Earth days.</p>
      
      <h2 class="planet__name">Earth</h2>
      <img 
        class="planet__emoji planet__emoji--earth" 
        alt="Earth emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-earth.png" />
      <p class="planet__description">Earth is the planet we live on. It is the third planet from the Sun. It is the only planet known to have life on it. The Earth formed around 4.5 billion years ago.</p>
      
      <h2 class="planet__name">Mars</h2>
      <img 
        class="planet__emoji planet__emoji--mars" 
        alt="Mars emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-mars.png" />
      <p class="planet__description">Mars is the fourth planet from the Sun in the Solar System and the second-smallest solid planet. Mars is a cold terrestrial planet with polar ice caps of frozen water and carbon dioxide.</p>
      
      <h2 class="planet__name">Jupiter</h2>
      <img 
        class="planet__emoji planet__emoji--jupiter" 
        alt="Jupiter emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-jupiter.png" />
      <p class="planet__description">Jupiter is the largest planet in the Solar System. It is the fifth planet from the Sun. Jupiter is a gas giant, both because it is so large and made up of gas. </p>
      
      <h2 class="planet__name">Saturn</h2>
      <img 
        class="planet__emoji planet__emoji--saturn" 
        alt="Saturn emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-saturn.png" />
      <p class="planet__description">Saturn is the sixth planet from the Sun in the Solar System. It is the second largest planet in the Solar System, after Jupiter. Saturn is one of the four gas giant planets, along with Jupiter, Uranus, and Neptune.</p>
      
      <h2 class="planet__name">Uranus</h2>
      <img 
        class="planet__emoji planet__emoji--uranus" 
        alt="Uranus emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-uranus.png" />
      <p class="planet__description">Uranus is the seventh planet from the Sun in the Solar System. It is a gas giant. It is the third largest planet in the solar system. The planet is made of ice, gases and liquid metal.</p>
      
      <h2 class="planet__name">Neptune</h2>
      <img 
        class="planet__emoji planet__emoji--neptune" 
        alt="Neptune emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-neptune.png" />
      <p class="planet__description">Neptune is the eighth planet from the Sun in the Solar System. It is a gas giant. It is the fourth largest planet and third heaviest.</p>
      
      <h2 class="planet__name">Pluto</h2>
      <img 
        class="planet__emoji planet__emoji--pluto" 
        alt="Pluto emoji." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/emoji-pluto.png" />
      <p class="planet__description">Pluto is a dwarf planet in the Solar System. Its formal name is 134340 Pluto. The dwarf planet is the ninth largest body that moves around the Sun.</p>
    </div>
  </div>
  
  <aside>
    <p>
      <small>Planet descriptions adapted from <a href="https://simple.wikipedia.org/wiki/Main_Page">Simple Wikipedia</a>. Planet emoji taken from Alli McKee's illustration work for the <a href="https://www.unicode.org/L2/L2017/17100-planet-emoji-seq.pdf">Planet Emoji proposal (PDF)</a>.</small>
    </p>
  </aside>
</main>

// Demo
h2:nth-of-type(3) {
  color: var(--color-jaffa);
  font-family: 'Modak', cursive;
  font-size: 4rem;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: initial;
  
  &::before,
  &::after {
    content: "🎉";
    font-size: 2.25rem;
    margin: 1rem;
    position: relative;
      bottom: 0.25rem;
  }
}


// Pen Setup
.example__demo--nth-of-type {
  background-color: var(--color-charade);
  border: 3px solid var(--color-sand);
  text-align: center;
}

.planet__name {
  border-top: 5px dotted var(--color-sand);
  font-size: 1.75rem;
  letter-spacing: 0.1em;
  margin-top: 3rem;
  margin-bottom: 0.5rem;
  padding-top: 2rem;
  text-transform: uppercase;
  
  &:first-of-type {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
  }
}

.planet__emoji {
  margin-top: 0.5rem;
  width: 5rem;
  filter: drop-shadow(0 0 2.5rem var(--color-cinder));
}

.planet__emoji--mercury {
  margin-bottom: 1rem
}

.planet__emoji--earth {
  margin-top: -0.5rem;
}

.planet__emoji--saturn {
  width: 10rem;
}

.planet__emoji--pluto {
  width: 4rem;
}

.planet__description {
  margin-top: 1rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}