今回は「nth-child」と「nth-of-type」の違いを紹介します。
子の2つはそっくりな双子のような存在なので、
最初はどっちがどっちだがわからなくなるかもしれませんが、
何度が見ていけば慣れると思いますよ♪

「nth-child」と「nth-of-type」とは？

「nth-child」と「nth-of-type」は、擬似クラスの1つです。
リストなどでたくさん同じタグが並んでいるときに、
それぞれ個別にスタイルを適用させたい場合、
全てにclassを付けていくのは大変な作業です。
そんな時に役に立つのが:nth-childと:nth-of-typeです。

See the Pen LrypjR by kiharaneko (@kiharaneko) on CodePen.

上のコードでは、どのタグにもclassを付けてないですが、
一部分にのみスタイルが適用されています。
ちなみに、セレクタの部分にはタグ以外にclassやid指定もできます。
ただ、これだけだと2つは一体何が違うのかよくわからないですよね…

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

nth-childとnth-of-typeの違いは、要素の数え方です。

〇:nth-child(n)

n番目の子となる〇要素にスタイルを適用する際に使用します。
下のコードでは、pタグの間にdivタグをはさんでいます。
その状態でpタグの文字色を2行目は赤、3行目は緑にするように指定しています。

See the Pen MXmayL by kiharaneko (@kiharaneko) on CodePen.

3行目にはスタイルが適用されていますが、2行目は変化がありません。
理由は、2行目がdivタグだからです。
:nth-childでは、指定した番号が違うセレクタだとスタイルが適用されなくなります。

〇:nth-of-type(n)

n番目のその種類の要素にスタイルを適用する際に使用します。
下のコードも:nth-child同様、pタグの間にdivタグをはさみ、
pタグの文字色を2行目は赤、3行目は緑にするように指定しています。

See the Pen mKmeOw by kiharaneko (@kiharaneko) on CodePen.

なんとこっちは3行目と5行目にスタイルが適用されました！
:nth-of-typeでは、指定した番号が違うセレクタだった場合、
そのセレクタをスキップし、次の同じセレクタにスタイルを適用します。

奇数・偶数で指定する

See the Pen RJVrRB by kiharaneko (@kiharaneko) on CodePen.

このnth-〇〇は、奇数・偶数番目という形でスタイルを適用させることができます。

奇数は、かっこ内に「2n+1」か「odd」と指定し、
偶数は、かっこ内に「2n」か「even」と指定します。

また、奇数偶数以外にも3の倍数の場合は「3n」、5の倍数なら「5n」
という風に指定することで様々な倍数で指定できます。

後ろから数える

通常は上から数えてn番目にあるかと数えていきますが、
「:nth-last-child(n)」「:nth-last-of-type(n)」
と指定すると後ろからn番目と数えてくれます。

要素の最初・最後を指定する

最初を指定したい場合

:first-〇〇か:nth-〇〇(1)と指定します。

最後を指定したい場合

:last-〇〇と指定します。