CSS3: 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する

アプリケーションの仕様上、約20年ぶりに テーブルで HTML コーディングを行う必要がありました(笑)

テーブルの最終行にのみ適用したいスタイルがあり、疑似クラスを使って簡単に実現できたのですが、少し手間取った場面がありました。
今回は、疑似クラス :last-child の使い方をメモしておきます。

目次

  • 最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する
  • まとめ

最後の要素、もしくは要素が一つの場合の要素にスタイルを適用する

table の最終行の th, td 要素の下部ボーダーを表示させたくない場合、疑似クラス :last-child を以下のように適用します。

HTML

<table class="table=bordered">
<tbody>
<tr>
<th>A</th>
<td>1</td>
<td>2</td>
</tr>
<tr>
<th>B</th>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>C</th>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>

CSS

.table-bordered tr:last-child th,
.table-bordered tr:last-child td {
    border-bottom: 0;
}

ところが table が 1行の場合、下部ボーダーは表示されてしまいます。

1行でも下部ボーダーをなくしたい場合、先ほどのスタイルへ、以下のように疑似クラス :only-child を追加することで、最終行のセル、もしくは1行だった場合のセルに対しスタイルが適用されます。

HTML

<table class="table=bordered">
<tbody>
<tr>
<th>A</th>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>

CSS

.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;
}

まとめ

今更、テーブルでレイアウトのコーディングするのはやり切れませんでしたが、テーブルにはレスポンシブデザインに必要な柔軟性を持ち合わせています。

画面レイアウトにテーブルを使用することは、コーディング規約やメンテナンス上問題があり、本来の用途以外での乱用は避けるべきですが、flex レイアウトで解決できないとき、助けられる場面もあるかと思います。

この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

siro:chro 無料ゲーム SQN をリリースしました

img_sqn_00

sirochro 初の無料ゲームアプリ SQN をリリースしました。
記事:SQN: iOS 無料ゲームアプリ SQN - Sequential Numbers をリリース
ちょっとした時間に楽しめる完全無料のゲームなっていますので、是非ダウンロードして遊んでみてください。

↓SQN のダウンロードはこちらから

Related Contents

Pickup Contents