「:nth-of-type()」と「:nth-child()」の違いは?要素の指定方法に注意

「:nth-of-type()」と「:nth-child()」の違いは? web制作

CSSにはID・クラス名を使わずに、要素細かく指定するための機能があります。

中でも「nth-of-type」と「nth-child」は、要素をピンポイントで指定できるのでとても便利です。

2つの機能は似ていますが、若干使い方に違いがあるので紹介したいと思います。

スポンサーリンク

「:nth-of-type」と「:nth-child」の違い

nth-of-type」と「nth-child」は、どちらも子要素のn番目を指定するものですが、微妙に特徴が違います。

それぞれこちらのHTMLコードをもとに違いを見ていきましょう。

<div>
   <p>1つ目のP要素</p>
   <p>2つ目のP要素</p>
   <h3>1つ目のh3要素</h3>
   <p>3つ目のP要素</p>
   <p>4つ目のP要素</p>
   <p>5つ目のP要素</p>
</div>

「:nth-of-type」の特徴

「:nth-of-type」は、同じ種類の子要素の中でn番目のものを指定できます。

 

例えば「4つ目のP要素」を指定したいときはこうなります。

div p:nth-of-type(4){}

 

途中にある「1つ目のh3要素」を無視し、「P要素」のみをカウントしているので単純に「4」と指定するだけで「4つ目のP要素」を指定することが出来ます。

「:nth-child」の特徴

「:nth-child」は、要素の種類関係なく同じ階層の子要素の中でn番目を指定できます。

先ほどのように「4つ目のP要素」を指定しようとするとこうなります。

div p:nth-child(5){}

同じ階層にある子要素は種類関係なくカウントされるので、「P要素」だけでなく途中にある「1つ目のh3要素」も含んで数字を指定する必要があります。

スポンサーリンク

両者ともに数字以外でも指定できる

2つの違いを紹介したところで、ついでにもう少し掘り下げてみたいと思います。

実は「:nth-of-type」「:nth-child」ともに括弧内には数字以外も指定できます。

それがこちらです。

奇数番目の要素を指定

div p:nth-of-type(odd){}
div p:nth-child(odd){}

偶数番目の要素を指定

div p:nth-of-type(even){}
div p:nth-child(even){}

他にも2個飛ばし、3個飛ばしみたいな指定もできるので興味のある人は調べてみてください。

最後に

あやふやにしていると、順番がずれてくるので気を付けましょう。

状況に応じて使い分けてみてください。