アプリケーションの仕様上、約20年ぶりに テーブルで HTML コーディングを行う必要がありました（笑）
テーブルの最終行にのみ適用したいスタイルがあり、疑似クラスを使って簡単に実現できたのですが、少し手間取った場面がありました。
今回は、疑似クラス :last-child の使い方をメモしておきます。
目次
- 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する
- まとめ
最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する
table の最終行の th, td 要素の下部ボーダーを表示させたくない場合、疑似クラス :last-child を以下のように適用します。
HTML
[code]
| A | 1 | 2 |
|---|---|---|
| B | 3 | 4 |
| C | 5 | 6 |
[/code]
CSS
[code]
.table-bordered tr:last-child th,
.table-bordered tr:last-child td {
border-bottom: 0;
}
[/code]
ところが table が 1行の場合、下部ボーダーは表示されてしまいます。
１行でも下部ボーダーをなくしたい場合、先ほどのスタイルへ、以下のように疑似クラス :only-child を追加することで、最終行のセル、もしくは1行だった場合のセルに対しスタイルが適用されます。
HTML
[code]
| A | 1 | 2 |
|---|
[/code]
CSS
[code]
.table-bordered tr:last-child th,
.table-bordered tr:last-child td,
.table-bordered tr:only-child th,
.table-bordered tr:only-child td {
border-bottom: 0;
}
[/code]
まとめ
今更、テーブルでレイアウトのコーディングするのはやり切れませんでしたが、テーブルにはレスポンシブデザインに必要な柔軟性を持ち合わせています。
画面レイアウトにテーブルを使用することは、コーディング規約やメンテナンス上問題があり、本来の用途以外での乱用は避けるべきですが、flex レイアウトで解決できないとき、助けられる場面もあるかと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
