構造擬似クラス(empty)を使って空要素にスタイルを適用する

テーブルで空の場所にスタイルを適用したいことがあります。 Ardor(@ArdorOnline)です。 テーブルのデータが空だったらスタイルクラスを指定することで解決していました。 CSS3からは、もっと簡単に一括して設定する方法がありました！emptyについてご紹介します。

構造擬似クラス(empty)

構造擬似クラスに「empty」というのが追加されています。 これは空要素にスタイルを指定するクラスです。

例えば、テーブルの空データがある箇所にスタイルを一括して指定することができます。

emptyについては、次の通りです。

セレクタ	適用先	サンプル
:empty	空の要素に適用。	:empty {   background-color: white; }

スタイルの記述

例えば、テーブルの空データに適用する場合は次のように記述します。

.sample td:empty {
 background-color: greenyellow;
}

サンプル

テーブルの空データ欄は色がついて表示されているはずです。
空データに1つずつスタイルを指定しなくてもemptyで一括指定しています。

A	B	C
データあり	データあり
	データあり	データあり
データあり		データあり
	データあり

最後に

CSS3は、今まで面倒だったことが構造擬似クラスを利用して簡単に設定できるようになりました。 とても便利になってきました！困っていた方は、是非利用してみてください。

最後までお読み頂きありがとうございます。