「CSS」:emptyで中身が空の要素にcssを適用するサンプル

2013年8月21日2021年8月25日

書式
クラス名:empty
:empty は CSS の 擬似クラスで、子を持たない要素を表します。
子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、
CSS の content は要素が空であるかどうかの判断には影響しません。

使用例

<style>
.cft {
  background: pink;
  height: 20px;
  width: 220px;
}

.cft:empty {
  background: skyblue;
}
</style>
<div class="cft"><!-- コメント1--emptyのcssを適用. --></div>
<br/>

<div class="cft">内容--クラスcftを適用</div>
<br/>

<div class="cft">
      <!-- コメント2. emptyのcssを適用 -->
</div>

<div class="cft">
      <p><!-- test222 cftのcssを適用 --></p>
</div>