どちらも便利で役に立つ cssセレクターですが、どう違うのでしょう。使い初めの頃は上手くいかない時がありませんか？その似ているようで、異なる２つの使い方を簡単に説明します。
＊ first-child、last-of-type 等もありますが、今回は置いときます
基本の使い方ですが、両方とも
E:nth-child(n)
E:nth-of-type(n)
E = 指定したい要素を記述、n = 指定したい順番(何番目か)を記述です。つまり「n番目のE要素」です。こんな感じ。
div.box p:nth-of-type(2) = boxというクラス名の div の中の２番目の p、を指定しています。
nth-child は親要素の中で指定の順番で「当てはまる」指定の子要素を指し示します。
nth-of-type は親要素の中で「指定子要素だけの指定の順番通り」の要素を指し示します。
ややこしいことはやめてシンプルな説明です。
▨ nth-child → 他の要素が関係します。
▨ nth-of-type → 他の要素は関係ありません。
実際に見てみましょう。div 内の子要素「p」の「1番目, 2番目」を指定します。
See the Pen KqwYWV
nth-child だと h2 タグも div 内の子要素として以下の様に指定されカウントされます。カウントだけで、CSS は反映されません。＊h2 以外の他の要素であっても当然カウントされます
<div>
<h2> カウントされる
1 = <p> カウント
2 = <p> カウントされない
3 = <p>
4 = <p>
5 = <p>
</div>
一方、nth-of-type の方は変化なし。これは h2 タグは関係なしに(他の要素であっても関係なし) div 内の子要素の「ｐ」だけをカウントしているからです。
<div>
<h2>
1 = <p> カウント
2 = <p> カウント
3 = <p>
4 = <p>
5 = <p>
</div>
分かりにくいという方はまず、nth-of-type だけを使用すれば良いかと思います。
色んな指定方法があり、使いこなせるようになるととても便利です。
そんじゃまた.
