本記事では、CSSのnth-childとnth-of-typeの違いについてサンプルコードを用いて分かりやすく解説しています。
- HTMLとCSSの基本が体系的に学べる
- Webデザインの基本が学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
nth-childとnth-of-typeは何が違うの？
nth-childとnth-of-typeはn番目の要素に対してのみスタイルを適用させたい時に使われる擬似クラスです。
<p>nth-child</p>
<ul class="sample1">
<p>pタグ</p>
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
</ul>
<p>nth-of-type</p>
<ul class="sample2">
<p>pタグ</p>
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
</ul>
/* nth-childの設定 */
.sample1 li:nth-child(1){
color:#f00;
}
.sample1 li:nth-child(2){
color:#0f0;
}
.sample1 li:nth-child(3){
color:#00f;
}
/* nth-of-typeの設定 */
.sample2 li:nth-of-type(1){
color:#f00;
}
.sample2 li:nth-of-type(2){
color:#0f0;
}
.sample2 li:nth-of-type(3){
color:#00f;
}
▼nth-childとnth-of-typeを使った表示結果
表示結果を確認すると、両方とも全く同じスタイルが適用されていることが分かります。このようにnth-childとnth-of-typeは挙動が似ていることから2つの違いを理解せず使用してしまう場合があります。
以降の見出しで、nth-childとnth-of-typeの違いが表れる場面を見ていきましょう。
対象以外のHTMLタグが混在している時
nth-childとnth-of-typeの違いが表れるのは、対象以外のHTMLタグが混在している時です。
<p>nth-child</p>
<ul class="sample1">
<p>pタグ</p> <!-- pタグの追加 -->
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
</ul>
<p>nth-of-type</p>
<ul class="sample2">
<p>pタグ</p> <!-- pタグの追加 -->
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
</ul>
▼対象以外のHTMLタグが混在している時の表示結果
先ほど紹介したコードの<ul></ul>内の先頭に<p>タグを追加しました。
すると、nth-childでスタイル適用しているliタグのカラーは「緑・青」と赤色が適用されていないことが確認できます。nth-of-typeでスタイル適用しているliタグのカラーは「赤・緑・青」と全ての色が適用されていることが確認できます。
この結果からnth-childは「li:nth-child(3)」のようにliタグの3番目にスタイルを適用する指定をしても、1番目〜3番目の間に別タグがある場合ずれてスタイルが適用されることが分かります。逆にnth-of-typeは「li:nth-of-type(3)」と指定すれば、1番目〜3番目の間に別タグがあっても3番目のliタグにスタイルが適用されます。
first-child、last-child、first-of-type、last-of-typeの違い
first-child、last-child、first-of-type、last-of-typeの違いも、nth-childとnth-of-typeと全く同じです。
最初・最後の要素に別タグがあった場合、指定した最後のタグにスタイルが適用されるのがfirst-of-typeとlast-of-typeで、スタイルが適用されないのがfirst-childとlast-childです。
<p>first-child last-child</p>
<ul class="sample1">
<p>pタグ</p>
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<p>タグ</p>
</ul>
<p>first-of-type last-of-type</p>
<ul class="sample2">
<p>pタグ</p>
<li>1番目の要素</li>
<li>2番目の要素</li>
<li>3番目の要素</li>
<p>タグ</p>
</ul>
/* first-child last-childの設定 */
.sample1 li:first-child{
color:#f00;
}
.sample1 li:last-child{
color:#00f;
}
/* first-of-type last-of-typeの設定 */
.sample2 li:first-of-type{
color:#f00;
}
.sample2 li:last-of-type{
color:#00f;
}
▼first-child、last-child、first-of-type、last-of-typeの表示結果
