擬似クラス「:first-of-type」と「:last-of-type」の使い方

この記事では、擬似クラス「:first-of-type」と「:last-of-type」の使い方について説明していきます。

「:of-type」が付く擬似クラス
- 擬似クラス「:first-of-type」の使い方
- 擬似クラス「:last-of-type」の使い方

「:of-type」が付く擬似クラス

「:of-type」が付く擬似クラスは、指定した要素が含まれる子要素のうち、指定した要素と同じ種類の要素の中で先頭からn番目の要素にスタイルが適用されます。
以下のソースを参考に「:first-of-type」と「:last-of-type」の使い方について説明していきます。

See the Pen
first-of-type by shiakisudev (@shiakisu)
on CodePen.

HTML

<main>
  <div>div1</div>
  <p>p2</p>
  <p>p3</p>
  <div>div4</div>
  <p>p5</p>
  <div>div6</div>
</main>

CSS

p:first-of-type{
  background-color:yellow;
}
p:last-of-type{
  background-color:red;
}

擬似クラス「:first-of-type」の使い方

「:first-of-type」は、指定した要素が含まれる子要素のうち、指定した要素と同じ種類の要素の中で先頭から1番目（最初の）の要素に対してスタイルを適用します。
上記では、指定した要素（＝p要素）が含まれる子要素は、div1、p2、p3、div4、p5、div6の6種類です。そのうちp要素と同じものはp2、p3、p5です。
p2、p3、p5の中で一番最初のp要素はp2なので、これが黄色くなるというわけです。