例えば、以下のようにカードが並んだレイアウトを作成するとき、1行に3個ずつのレイアウトを基本とすると、要素数が4個の時は一つだけ下の行に行ってしまうので、少しアンバランスな感じになってしまいます。そこで4個の時だけ2行2列にできれば収まりがよさそうですが、その都度クラス名などで調整するのも、更新性が悪くなりそうです。

今回はそういったときに役立つcssの小技を紹介します。

nth-child疑似クラスとは

兄弟要素（入れ子になっていない同列に並んだhtmlタグ）の中での順序で要素を指定する疑似クラスです。
nth-child(2)と書くと2番目の要素を指します。

いろいろな指定方法

nth-childでは整数の順番以外にも要素を指定することができます。
nth-child(odd)であれば奇数番目の要素を指定することができます。（偶数はeven）
また、nth-child(3n+1)であれば、nには整数が0から順に入っていくので、3の倍数＋1番目の要素（1、4、7、10・・・）を指定することができます。

また、nth-last-child()という書き方に変えると、最後からの順番を指定することができます。
例）nth-last-child(3)・・・最後から3番目

このほかに、nth-of-type()（同じタグの中で何番目か）という指定方法もあります。

複数指定することもできる

これらは複数指定することもできます。

nth-child(2):nth-last-child(3)
と書けば、最初から数えて2番目かつ最後から数えて3番目の要素を指定することができます。
下の例であれば上のリストは全部で6つの要素があるので、最初から2番目かつ最後から3番目の要素は存在しないので、スタイルは適用されていません。下のリストの2番目の要素だけにスタイルが適用されています。

これを生かすと要素の数に応じて、幅や余白などのスタイルを変えることができます。

冒頭のレイアウトの場合でもこれを使うことで対応することができます。

要素数4個の時だけ2行2列になるようにcssを調整します。

See the Pen Untitled by Yoriyasu Nishimura (@yori3) on CodePen.

※has()は条件に該当する要素がある場合にのみ適用される疑似クラス

前から1番目かつ後ろから4番目になる要素があるのは、要素数が4個の時だけなので、:nth-child(1):nth-last-child(4)と一致する要素があるときだけ適用されるようにすれば、4個の時だけ2行2列が実現できます。

まとめ

cssを書いている人は、おそらくnth-child疑似クラスは使ったことがあると思いますが、実はこういった使い方もできます。

複数の疑似クラスを組み合わせることで条件を絞り込んで指定することができるので、一つ一つにクラスを付けて処理する必要がなくなり、再利用性の高いパーツを作成することができます。

また、更新時に変更が入った際も、classで管理する必要がなく、要素数で自動的にスタイルを変えてくれるので、CMS等、更新者がclassを操作できない場合なども事前にcssで用意しておけば、更新時に細かい操作をせずにレイアウトを整えることができます。

更新頻度の高いサイトで生きる小技ではないかと思います。