【今さら聞けない！】cssのセレクタ「nth-pf-type」と「nth-child」の違いについて解説

Web2016年12月19日

cssのセレクタで「特定の要素の○番目」に対してスタイル当てるような場合、nth-of-typeとnth-childを使って実現することができますが、それぞれの違いをよく理解しておく必要があります。

本記事ではそれぞれの違いについてまとめてみましたので、どちらを使うべきか迷った場合はどうぞご参考にしていただければ幸いです。

nth-of-type

nth-of-typeは「親要素内で兄弟関係にあるE要素でn番目」に対してスタイルを当てることができます。

サンプルコード

ul.hoge li:nth-of-type(2){
//任意のcssを記述
}

上記のセレクタは以下の太字部分を対象とします。

<ul class="hoge">
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
<li>ほげ4</li>
<li>ほげ5</li>
</ul>

また、以下のようにして奇数や偶数番目のものだけ対象としたり、

ul.hoge li:nth-of-type(odd){
//任意のcssを記述
}

<ul class="hoge">
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
<li>ほげ4</li>
<li>ほげ5</li>
<li>ほげ6</li>
</ul>

ul.hoge li:nth-of-type(even){
//任意のcssを記述
}

<ul class="hoge">
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
<li>ほげ4</li>
<li>ほげ5</li>
<li>ほげ6</li>
</ul>

「3n」などにすることで「3の倍数番目の要素だけ対象」とすることもできます。

ul.hoge li:nth-of-type(3n){
//任意のcssを記述
}

<ul class="hoge">
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
<li>ほげ4</li>
<li>ほげ5</li>
<li>ほげ6</li>
</ul>

また、以下のように同レベルに兄弟要素が存在する場合、太字部分に対してスタイルが適用されます。

div.hoge .moge:nth-of-type(4){
//任意のcssを記述
}

<div class="hoge">
<div class="moge">もげ1</div>
<div class="moge">もげ2</div>
<div class="fuga">ふが1</div>
<div class="moge">もげ3</div>
<div class="moge">もげ4</div>
<div class="moge">もげ5</div>
</div>

そこのあなた、「あれ？.moge:nth-of-type(4)だからもげ4の行じゃないの？」と思われたのではないでしょうか。
ここが少しわかりづらいのですが、nth-of-typeは同じ要素（上記サンプルコードの場合はdiv）であればそれも個数として数えるため、この場合.hogeの子要素のdivで4番目である「もげ3」の行にスタイルが当たることになります。

以下のように、.fugaがdivではなくp要素であればどうなるでしょうか。

div.hoge .moge:nth-of-type(4){
//任意のcssを記述
}

<div class="hoge">
<div class="moge">もげ1</div>
<div class="moge">もげ2</div>
<p class="fuga">ふが1</p>
<div class="moge">もげ3</div>
<div class="moge">もげ4</div>
<div class="moge">もげ5</div>
</div>

この場合、p.fugaはdiv.mogeの兄弟関係としては数えられなくなるので、.mogeの4番目である「もげ4」の行に対してスタイルが当たることになります。

nth-child

nth-childは親要素のn番目の子要素であるE要素に対してスタイルを当てることができます。

サンプルコード

ul.hoge li:nth-child(2){
//任意のcssを記述
}

上記のセレクタは以下の太字部分を対象とします。

<ul class="hoge">
<li>ほげ1</li>
<li>ほげ2</li>
<li>ほげ3</li>
<li>ほげ4</li>
<li>ほげ5</li>
</ul>

以下の様に記述すると、.hogeの子要素.mogeとしては「もげ3」の行が3番目ですが、nth-childの場合は.fugaも含めて4番目となるため、太字の行にスタイルが当たることになります。

div.hoge .moge:nth-child(4){
//任意のcssを記述
}

<div class="hoge">
<div class="moge">もげ1</div>
<div class="moge">もげ2</div>
<div class="fuga">ふが1</div>
<div class="moge">もげ3</div>
<div class="moge">もげ4</div>
<div class="moge">もげ5</div>
</div>

nth-of-typeとの違いは、間に入る要素がdivだろうがpであろうが、要素関係なしに「子要素として何番目か」という数え方になります。

<div class="hoge">
<div class="moge">もげ1</div>
<div class="moge">もげ2</div>
<p class="fuga">ふが1</p>
<div class="moge">もげ3</div>
<div class="moge">もげ4</div>
<div class="moge">もげ5</div>
</div>

まとめ

nth-of-typeとnth-childはちゃんと理解して使用しないと意図しないスタイルがあたってしまうこともあるため注意が必要です。

よく理解して使いこなすことで一気にcssのソースコードがスッキリし、cssベースで凝ったデザインやレイアウトも見せ方等色々工夫できます。どうぞご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。