はじめに
複数の要素を並べる時に、「n番目の要素だけを指定してデザインを当てたいケース」がよくあります。
そのような時に使えるのが、CSSの擬似クラスである「nth-child」と「nth-of-type」です。
どちらも「n番目の要素を指定する」という点では同じですが、違いが曖昧だったので、基本的な部分を整理しました。
nth-childとは？
nth-child は、その要素が親要素の中で何番目の子要素かに基づいてスタイルを適用します。要素の種類（div / ul / li /pなど）に関係なく、名前の通りすべての子要素をカウントします。
See the Pen nth-childの説明 by kazui (@kazui38) on CodePen.
nth-of-typeとは？
nth-of-type は、同じタグ（この場合はdivとp）の中で2番目のものをカウントします。nth-of-typeのtypeは同じ種類（タグ）を指していると解釈しています。
See the Pen Untitled by kazui (@kazui38) on CodePen.
まとめ
・「nth-child」は子要素のn番目を指定する（タグは見ない）
・「nth-of-type」は同じタグをもつn番目の要素を指定する（タグを見る）
参考記事
タグ
