CSS3のセレクタ、nth-child(n)とnth-of-type(n)の違い

はじめに

CSSを書いていると、特定の要素を選択するセレクタを多用します。
今回は、そんなCSS3セレクタの中でも、特に利便性の高い、
nth-child(n)とnth-of-type(n)の使い方と、両者の違いを説明します。

nth-child

まずは、nth-child(n)の方から説明します。

<div class="hoge">
  <b>Week</b>
  <div>Monday</div>
  <div>Tuesday</div>
  <div>Wednesday</div>
  <div>Thursday</div>
  <div>Friday</div>
  <div>Saturday</div>
  <div>Sunday</div>
</div>

div:nth-child(7){
  color: red;
}

上記のコードでは、H1タグで囲まれた『Week』の子要素に、
『div』で囲んだ曜日の名前7つをマークアップしています。

ここで、七番目の曜日である『Sunday』の文字色を赤色にしたいと考え、
CSSでnth-childの引数に『7』を指定して記述しました。

ところが、実際には一つ手前の『Saturday』の文字色が変更されています。
これは、nth-child(n)が、親要素の子要素全ての中からn番目の要素を選択するため、
セレクタが勘定する要素の数に、タグも数えられてしまっているからです。

nth-of-type(2)

次に、nth-of-type(2)を見てみます

<div class="hoge">
  <h1>Week</h1>
  <div>Monday</div>
  <div>Tuesday</div>
  <div>Wednesday</div>
  <div>Thursday</div>
  <div>Friday</div>
  <div>Saturday</div>
  <div>Sunday</div>
</div>

div:nth-of-type(7){
  color: red;
}

今度は、想定通りに『Sunday』の色を変更することができました。
これは、nth-of-type(n)が、同じタグ同時の中から、
引数に指定した順番の要素を指定する動作を行うためです。

nth-childと比べると、文字数は増えますが、
こちらの方がより直感的に要素の指定が行えそうですね。

おわりに

nth-child(n)とnth-of-type(n)の違いがお分かり頂けたでしょうか。
微妙な違いですが、状況に応じて使い分けられると良いですね。