今回はCSSの擬似要素、nth-of-tyleとnth-childの違いについて解説しようと思います。
この２つの擬似要素は見た目も似ていますが、使い方も似ています。
初心者だと「指定したいところにスタイルが当たらない」など自分が理想とする動きにならず、ハマってしまう原因になってしまいます。
なので本記事で違いをしっかり理解していきましょう！！
nth-of-typeとは？
初めにnth-of-typeについて解説します。
nth-of-typeは、CSSのセレクタの一つで、要素の種類（div、p、liなど）に対して、指定された位置にある要素を選択します。
つまり、同じ種類の要素の中から、指定した位置にある要素を選択することができます。
nth-of-typeの使い方の例を見てみましょう！
See the Pen
Untitled by kanae (@suzukana)
on CodePen.
この場合、<div>要素の中で、<p>要素の2番目に現れる<p>2番目</p>が青くなりますね！
nth-childとは？
次にnth-childについて解説します。
nth-childは、nth-of-typeと似たセレクタですが、親要素内の全ての要素を対象にして、指定された位置にある要素を選択します。
つまり、同じ種類の要素だけでなく、異なる種類の要素も含めて位置で選択することができます。
nth-childの使い方の例を見てみましょう！
See the Pen Untitled by kanae (@suzukana) on CodePen.
この場合、<div>要素内で、2番目に現れる要素が赤くなります。
なので赤くなるのは2番目の要素の<p>１番目</p>のところです。
2番目の要素が<p>であっても、<span>であっても、位置で選択されるため、どちらでも赤くなります。
nth-of-typeとnth-childの違い
上記で解説した通り、nth-of-typeとnth-childの主な違いは、nth-of-typeは同じ種類の要素だけを対象にして選択するのに対して、nth-childはすべての子要素を対象にして選択する点です。
もう少し詳しく解説していきましょう。
例えば、以下のHTMLコードがあるとします。
<div>
<p>1番目</p>
<p>2番目</p>
<span>3番目</span>
<p>4番目</p>
</div>nth-of-typeとnth-childの両方を使って同じ<span>3番目</span>を選択してみましょう。
nth-of-typeの場合
div span:nth-of-type(1){
color: red;
}nth-of-typeの場合、<div>要素の中の<span>に対して指定します。
そして引数は1になります。
See the Pen div span:nth-of-type by kanae (@suzukana) on CodePen.
nth-childの場合
div :nth-child(3){
color: red;
}nth-childの場合、親要素内の全ての要素が対象になります。
なので<div>要素の中から3番目ということで、<div>要素に対して指定します。
引数は3です。
See the Pen span:nth-of-type by kanae (@suzukana) on CodePen.
class付きの要素を指定する場合
今までは、シンプルなHTML構造で説明してきましたが、実際には要素にidやclassなど属性を付けることが多いですよね。
そんな場合の例も解説していきましょう！
nth-of-typeの場合
See the Pen Untitled by kanae (@suzukana) on CodePen.
上記の場合、.numberクラスが付与された2番目の<div>または<p>要素を選択し、その文字色を赤色に変更します。
なので<div class="number">4番目</div>にスタイルが当たっているわけですね。
nth-childの場合
See the Pen クラス付き:nth-child by kanae (@suzukana) on CodePen.
上記の場合、.numberクラスが付与された2番目の要素を選択しています。
前半でも述べましたが、nth-childはすべての子要素を対象にして選択するので、<p class="number">2番目</p>にスタイルが当たることになります。
まとめ
nth-of-typeとnth-childについて、基本的なところからクラス付与した場合まで、解説してきました。
いかがだったでしょうか？
私自身、この２つの擬似要素に対して苦手意識があるので、私と同じような方にとってこの記事で少してもお力になれれば良いなと思います。
