トップページの中の セレクタの中の :empty疑似クラス (E:empty)

:empty疑似クラス (E:empty)

  • 最終更新:2009年7月 5日 10:05

CSS3で定義された:empty疑似クラスは、要素内がテキストや空白などを含め空の場合に適用されるセレクタです。
主な使いどころとしては、table要素内の空のtd要素などに使えるかと思います。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8未対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

: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>&nbsp;</td>
</tr>
</table>

テーブルは、左上「テキスト」、右上「半角スペース」、左下「空」、右下「&nbsp;」となっており、この中の空の要素だけピンクっぽい色になります。

このサンプルを今見ているブラウザで表示すると以下のようになります。

サンプルのブラウザ上の表示
text
 

もちろん、要素内が空で有れば他の要素でも使えますが、文書構造を考えると空の要素が許されるのはかなり限られてくると思うのでご利用は計画的に。
といっても、大半のCSS3セレクタに関しては、IE6~8が対応していないので中々実用し難いですね。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ