CSSの擬似要素「nth-of-type」と「nth-child」を理解して、〇〇番目の要素にスタイルを適用する

2018/11/06 2023/04/10

CSSの擬似要素の一種「 :nth-of-type 」や「 :nth-child 」について解説していきます。
とても便利なクラスですので覚えてみてください。

「 :nth-of-type 」と「 :nth-child 」の違いについて

「 :nth-of-type 」は、〇〇番目の同じ要素にスタイルを適用します。
「 :nth-child 」は、要素の種類関係無く〇〇番目の要素にスタイルを適用します。

以下、指定例を記載しますので参考にしてください。

p:nth-of-type(2){
	color: #f00;
}
p:nth-child(2){
	color: #f00;
}

<div>
	<h2>これは見出し</h2>
	<p>ここに「 :nth-child 」のスタイルが適用されます。</p>
	<p>ここに「 :nth-of-type 」のスタイルが適用されます。</p>
</div>

先に紹介した「 :nth-of-type 」と「 :nth-child 」の違いについて理解できれば、こちらの応用も使いこなすことが出来ます！

:nth-of-type(1)
:nth-child(1)

:nth-of-type(odd)
:nth-child(odd)

:nth-of-type(even)
:nth-child(even)

:nth-of-type(3n)
:nth-child(3n)

:nth-of-type(3n+1)
:nth-child(3n+1)

:first-of-type
:first-child

:nth-of-type(-n+3)
:nth-child(-n+3)

:nth-of-type(n+3)
:nth-child(n+3)

:last-of-type
:last-child

:nth-last-of-type(3)
:nth-last-child(3)

:nth-last-of-type(-n+3)
:nth-last-child(-n+3)