:empty【空要素】疑似クラス

メモ

構文

構文説明
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>

データデータ
データ
データデータ

関連