CSSで何番目・偶数奇数・何番目以降・最初最後などを指定する擬似クラスまとめてみた【コピペ用】

最初だけ・最後だけ

:first-child

一番最初の要素にのみスタイルを適用します。

:last-child

最後の要素にのみスタイルを適用します。

リストの最初や最後のborderのラインを消したり、marginでスペースを調節したりする時に使えます。

奇数・偶数

:nth-child(odd)

奇数番目の要素にのみスタイルを適用します。

:nth-child(even)

偶数番目の要素にのみスタイルを適用します。

tableなどで表を作った時に、1行ごとに色を変えたりする時に使えます。

3の倍数・3の倍数+1

:nth-child(3n)

3の倍数の要素にのみスタイルを適用します。（3番目,6番目,9番目,12番目～）

:nth-child(3n+1)

3の倍数に+1した数字の要素にのみスタイルを適用します。これは少し分かりづらいかもしれませんがよく使う擬似クラスの一つです。これは1番目にもスタイルが適用されるのがポイントです。（1番目,4番目,7番目,10番目～）

個人的にこのセレクタは横並びのオブジェクトを配置する際に良く使います。

上から2番目だけ・下から3番目だけ

:nth-child(2)

上から2番目の要素にだけスタイルを適用します。

:nth-last-child(3)

下から3番目の要素にだけスタイルを適用します。

新着記事3件まで『new』の文字を表示させる時などに使えます。

上から5番目まで全部・上から6番目以降全部

:nth-child(-n+5)

上から5番目までの要素全部にスタイルを適用します。

:nth-child(n+6)

上から6番目以降の要素全部にスタイルを適用します。

下から5番目まで全部・下から6番目以降全部

:nth-last-child(-n+5)

下から5番目までの要素全部にスタイルを適用します。

:nth-last-child(n+6)

下から6番目以降の要素全部にスタイルを適用します。

まとめ

以上が私が良く使う何番目系の擬似クラスでした。

上記で紹介した擬似クラスに:notを加えれば『○○以外にスタイルを適用する』という事もできます。:not(:first-child)で、最初の要素以外全部にスタイルを適用するとなります。（私は使うことはほぼ無いのですが）

ひとまずこれだけ覚えておけば大体のレイアウトには対応できるはずです。