HTML&CSS

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

HTML&CSS

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

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

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

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

CSS

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

HTML

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

応用編

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

1番目の要素に適用

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

奇数番目の要素に適用

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

偶数番目の要素に適用

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

3,6,9,12・・・番目の要素に適用

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

1,4,7,10・・・番目の要素に適用

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

最初の要素に適用

:first-of-type
:first-child

最初の3つの要素に適用

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

最初から3つ目の要素以降に適用

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

最後の要素に適用

:last-of-type
:last-child

最後から3番目の要素に適用

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

最後から3つの要素に適用

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

最後から3つ目の要素以降に適用

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

あなたにおすすめの記事