<main>
  <h1>擬似クラス</h1>
  <h2>first-of-typeの使い方</h2>
  <p>要素の種類も考慮できます。</p>
  <p>要素の種類も考慮できます。</p>
  <h2>nth-of-typeの使い方</h2>
  <p>要素の種類も考慮できます。</p>
  <p>要素の種類も考慮できます。</p>
  <h2>last-of-typeの使い方</h2>
  <p>要素の種類も考慮できます。</p>
  <p>要素の種類も考慮できます。</p>
</main>
h2:first-of-type {
  background-color: skyblue;
}

h2:last-of-type {
  background-color: pink;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.