:empty

div:empty {
  outline: 2px solid deeppink;
  height: 1em;
}

<p>コンテンツのない要素:</p>
<div></div>

<p>コメントのある要素:</p>
<div><!-- コメント --></div>

<p>内部に空の要素を持つ要素:</p>
<div><p></p></div>

:empty {
  /* ... */
}

<div class="box"><!-- ライム色になります。 --></div>
<div class="box">ピンク色になります。</div>
<div class="box">
  <!-- このコメントの周囲には空白があるため、古いブラウザーではピンク色になります。 -->
</div>
<div class="box">
  <p>
    <!-- このコメントの周囲には統合することができない空白や要素があるため、すべてのブラウザーでピンク色で表示されます。 -->
  </p>
</div>

body {
  display: flex;
  justify-content: space-around;
}

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}