Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

CSS

              
                // 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;
}
              
            
!

JS

              
                
              
            
!
999px

Console