[CSS]:emptyで中身が空のスタイルシートを適用する

2014年3月23日2021年8月25日

書式
td:empty{xxx}
div:empty{xxx}
:empty は CSS の 擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。
使用例

<style>
 td:empty {
    height: 20px;
    background-color:skyblue;
  }
 div:empty {
   height: 20px;
    background-color: red;
}
</style>
<table>
  <tr><td>aa112345666</td></tr>
  <tr><td></td></tr>
  <tr><td>cc33789999</td></tr>
   <tr><td><!-- 中身が空の要素empty適用--></td></tr>
</table>
<div></div>