[CSS] Grid Layoutの左端だけにCSSを指定する。

Grid Layoutを使っていて、複数行、3列の表を作成した。

行の左端にCSSを適用したかったが、迷ったので整理しておく。
n番目の要素にCSSを適用するためには、:nth-child()擬似クラスを使う。

3の倍数ごとにCSSをあてる

まず検討したのは、3の倍数の時にCSSを適用できないか？と思った。

:nth-child(3n){}

こうすると、3の倍数ごとにCSSが当たるので、意図した形にはならない。

Grid Layout の左端の列にだけCSSをあてる

左側の列だけに適用するためには、下記のようにすることで実現します。

:nth-child(3n + 1) {}

:nth-child()のnは、0から始まるカウンターで、1ずつ増加していきます。
ここで、3n + 1は、nの値に3を掛けて1を足した結果となります。そのため、nが0, 1, 2, 3となるとき、3n + 1は1, 4, 7となり、3列の表の左端だけにCSSを当てることができます。

Summary

nth-childは便利なので自分の中で整理しておきました。
MDNに記載がありましたが、奇数(1,3,5,)を表すoddは、内部的には2n+1と同じセレクターになるので、なぜそうなるのかを理解しとくのは良いことです。