:empty疑似クラス (E:empty)
CSS3で定義された:empty疑似クラスは、要素内がテキストや空白などを含め空の場合に適用されるセレクタです。
主な使いどころとしては、table要素内の空のtd要素などに使えるかと思います。
- 対応ブラウザ
-
:empty疑似クラスのサンプル
table {
border: 1px solid #333;
}
table td {
width: 50px;
padding: 10px 20px;
border: 1px solid #333;
text-align: center;
}
table td:empty {
background: #ecc;
}
<table>
<tr>
<td>text</td>
<td> </td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
</table>
テーブルは、左上「テキスト」、右上「半角スペース」、左下「空」、右下「 」となっており、この中の空の要素だけピンクっぽい色になります。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
text
もちろん、要素内が空で有れば他の要素でも使えますが、文書構造を考えると空の要素が許されるのはかなり限られてくると思うのでご利用は計画的に。
といっても、大半のCSS3セレクタに関しては、IE6~8が対応していないので中々実用し難いですね。