:empty【空要素】疑似クラス
メモ 関連 外部リンク 構文 例
メモ
- 空要素の疑似クラス
- 要素については、HTML5 リファレンス メモ 参照
- 外部リンク
- CSS3 (英語)
構文
| 構文 | 説明 |
|---|---|
E:empty { スタイル定義 } | 空のE要素に適用 |
例
<style>
.ex1 { width: 100px; height: 20px; border: 1px blue solid; }
.ex1:empty { background-color: gray; }
</style>
<div class="ex1">abc</div>
<div class="ex1"></div>
<div class="ex1">xyz</div>
abc
xyz
<style>
.ex2 { border: 1px blue solid; border-collapse: collapse; }
.ex2 td { border: 1px blue solid; }
.ex2 td:empty { background-color:gray; }
</style>
<table class="ex2">
<tr><td>データ<td><td>データ</tr>
<tr><td><td>データ<td></tr>
<tr><td>データ<td><td>データ</tr>
</table>
| データ | データ | |
| データ | ||
| データ | データ |