CSSだけで複数カラムの最後の行のボーダーを消す方法。

Webページでボタンを3列で並べる場合、デザイン要望に 「最後の行だけ下線を消す」 というパターンがあります。
ボタンの数が不定でも正確に対応するには、CSSだけでも少し工夫が必要です。

それを実現したサンプルは以下です。

See the Pen 3列ボタン by たむ (@mgqhkiga-the-looper) on CodePen.

安易な書き方の問題点

上記を実現したいときに最初に思いつくのはこのコードかもしれません。

  &:nth-last-child(-n + 3) {
    border-bottom: none;
  }

これは、最後の3個にまとめてマッチします。
しかし、最後の行が1個や2個の場合、前の行のボタンまで下線が消えてしまいます。そのため、列数固定でもボタン数が不定のときは正確ではありません。

安全に最後の行だけ下線を消すCSS

列数が3列固定の場合、次の書き方で最後の行だけ下線を消すことができます。

/* 「最後の要素」（何列目でも） */
&:last-child {
  border-bottom: none;
}
/* 「最後から2つ目」かつ「1列目または2列目」 */
&:nth-last-child(2):not(:nth-child(3n)) {
  border-bottom: none;
}
/* 「最後から3つ目」かつ「1列目」 */
&:nth-last-child(3):nth-child(3n-2) {
  border-bottom: none;
}

【仕組みの解説】

3つの記述で、すべてのパターンに対応できています。

最後の行のボタン数	適用されるCSS
1個	`last-child`
2個	`last-child` `nth-last-child(2):not(:nth-child(3n))`
3個	`last-child` `nth-last-child(2):not(:nth-child(3n))` `nth-last-child(3):nth-child(3n-2)`