CSSスキル - 第8章 Lesson4

nth-childとnth-of-typeの違いと使い方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

「nth-child」と「nth-of-type」の使い方と違いについて、初心者向けに解説しています。
違いをしっかりと理解して、今後のWebサイト制作に役立てていきましょう。



この動画で学べること

・擬似クラスnth-of-type(n)を使う方法



擬似クラスnth-of-type(n)を使う方法

前回学んだnth-child(n)は、親要素の中のn番目子要素指定することができましたが、今回学ぶnth-of-type(n)は、さらにタグ名を指定して子要素のn番目にスタイルをかけることができます。




少し難しいので例をあげて考えてみましょう。
前回学んだnth-child(n)の場合は、「5つめのpタグという部分の背景を緑にしたい場合、nth-child(6) と書く必要がありました。




div p:nth-child(6) {
background-color: green;
}



これは、<div>タグの中の6つめの子要素だったからです。
しかし、今回のnth-of-type(n)の場合は、<div>タグの中の<p>タグのn番目と指定できるので、「5つめのpタグ」は5番目の<p>タグ、つまりnth-of-type(5)と書きます。



div p:nth-of-type(5) {
background-color: green;
}



では、保存してブラウザで見てみましょう。
このように、nth-of-type(5)で指定すると、「5つめのpタグ」の部分の背景が緑になりました。