「nth-child」と「nth-of-type」。どちらもn番目の子要素にスタイルを適用させたい時に使うものですが、「nth-child」はセレクタに指定した要素の種類に関わらず、同一要素も数に含まれるのに対し、「nth-of-type」はセレクタに指定した要素と同一要素のみを数えてn番目にある要素にスタイルを適用します。
文字で説明すると少しわかりにくいので、例を使って説明します。
子要素が同一要素のみの場合
まず、以下のようなケース。親要素divに子要素が3つあって、どれもspan要素になります。
HTML
<div>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
<div>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
CSS
span:nth-child(2) {
color: red;
}
span:nth-child(2) {
color: red;
}
CSS
span:nth-of-type(2) {
color: red;
}
span:nth-of-type(2) {
color: red;
}
この場合はどちらも2番目の要素である「テキスト２」の文字色が赤になります。
子要素が同一要素のみじゃない場合
次に、子要素がspan要素だけじゃなく、p要素もある場合で同じように指定したとします。
HTML
<div>
<p>違う要素です</p>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
<div>
<p>違う要素です</p>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
CSS
span:nth-child(2) {
color: red;
}
span:nth-child(2) {
color: red;
}
CSS
span:nth-of-type(2) {
color: red;
}
span:nth-of-type(2) {
color: red;
}
この場合、「nth-of-type(2)」は最初のケースと同じくテキスト２にスタイルが適用されますが、「nth-child(2)」はテキスト１にスタイルが適用されます。
なぜかというと、「nth-of-type」は同一要素の子要素のn番目に適用されるので、span要素の2番目にあたるテキスト２が赤文字になります。
一方、「nth-child」は子要素すべてを数に含めるため、最初のp要素から数えて2番目にあたるテキスト１が赤文字になります。
ちなみに以下のような場合、2番目がspan要素ではないため、「nth-child(2)」だとスタイルが適用されません。
HTML
<div>
<p>違う要素です</p>
<p>違う要素です</p>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
<div>
<p>違う要素です</p>
<p>違う要素です</p>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
まとめ
「nth-child」と「nth-of-type」は似ていますが、同一要素のみを数えるか、違う要素も数えるかという違いがあります。
子要素が同じ要素しかない場合はどちらを使っても同じ結果になりますが、子要素に違う要素も含まれている場合は違う結果になるので注意が必要です。
HTML
<div>
<p>違う要素です</p>
<p>違う要素です</p>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
<div>
<p>違う要素です</p>
<p>違う要素です</p>
<span>テキスト１</span>
<span>テキスト２</span>
<span>テキスト３</span>
</div>
CSS
span:nth-child(3) {
color: blue
}
span:nth-child(3) {
color: blue
}
CSS
span:nth-of-type(3) {
color: red;
}
span:nth-of-type(3) {
color: red;
}
Leave a Comment