「CSS」:emptyで中身が空の要素にCSSを適用する方法

2020年9月15日

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

.cft {
  background: green;
  height: 60px;
  width: 70px;
}
/* 内容を含まない <div> 要素を選択 */
.cft:empty {
  background: blue;
}

htmlコード
/* 中身が空のためCSSが適用*/
<div class="cft"></div>
<div class="cft">green 表示</div>
/* コメントの場合emptyのcssが適用*/
<div class="cft"><!– blue表示. –></div>

Posted by arkgame