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

この何番目を指定してスタイルを適用させる系の擬似クラスは私もWeb制作の際には良く使います。私はソラではタグが打てないので毎回毎回自分のサイトからコピペしたり、ググってコピペしたりしてました。

回数も回数なので備忘録も兼ねてもう自分のブログに解説と一緒に書いておこうと思います。とりあえず良く使う何番目指定系の擬似クラスだけをピックアップしました。

『解説なんざいらねぇよ！』と急ぎコピペしにこのページにやってきた人向けにCSS何番目系一覧を作りました。コピペしてどうぞ↓

• 何番目系擬似クラス一覧

  最初だけ	:first-child
  最後だけ	:last-child
  奇数	:nth-child(odd)
  偶数	:nth-child(even)
  3の倍数	:nth-child(3n)
  3の倍数+1	:nth-child(3n+1)

• 何番目系擬似クラス一覧

  上から2番目だけ	:nth-child(2)
  下から3番目だけ	:nth-last-child(3)
  上から5番目まで全部	:nth-child(-n+5)
  上から6番目以降全部	:nth-child(n+6)
  下から5番目まで全部	:nth-last-child(-n+5)
  下から6番目以降全部	:nth-last-child(n+6)

以降はそれぞれの擬似クラスの解説になります。

最初だけ・最後だけ

: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)で、最初の要素以外全部にスタイルを適用するとなります。（私は使うことはほぼ無いのですが）

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