CSS3のセレクタ、nth-child(n)とnth-of-type(n)の違い
CSS3 2016年9月11日
はじめに
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; }
▽結果
Week
今度は、想定通りに『Sunday』の色を変更することができました。
これは、nth-of-type(n)が、同じタグ同時の中から、
引数に指定した順番の要素を指定する動作を行うためです。
nth-childと比べると、文字数は増えますが、
こちらの方がより直感的に要素の指定が行えそうですね。
おわりに
nth-child(n)とnth-of-type(n)の違いがお分かり頂けたでしょうか。
微妙な違いですが、状況に応じて使い分けられると良いですね。