擬似クラス「:first-of-type」と「:last-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なので、これが黄色くなるというわけです。

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

「:last-of-type」は、指定した要素が含まれる子要素のうち、指定した要素と同じ種類の要素の中で最後の要素に対してスタイルを適用します。
p2、p3、p5の中で一番最後のp要素はp5なので、これが赤くなるというわけです。