「CSS」疑似クラス:emptyを使うサンプル

2020年10月19日

説明
:empty は CSS の 擬似クラスで、子を持たない要素を表します。
子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。
CSSコード

.cft {
  background: green;
}

.cft:empty {
  background: yellow;
}

htmlコード

<div class="cft"><!-- 「cft:empty」CSS適用. --></div>
<div class="cft">「cft」CSS適用.</div>
<div class="cft">
      11111「cft」CSS適用
</div>
<div class="cft">
      <p>2222「cft」CSS適用</p>
</div>