【CSS】空の要素を非表示にする方法

CSSを使って空の要素を非表示にする方法を紹介します。コンテンツを動的に生成している場合などに時々、要素が空っぽのまま生成されることがあったりするので、そのような場合にこの方法が利用できたりします。

空要素を非表示にするには？

空の要素を表示させないようにするためには、CSS疑似クラスの「:empty」を利用することで対応することができます。

.item-box:empty {
  display: none;
}

このようにすることで、「.item-box」が付与されている要素の中身がもしも空であったら表示しないということになります。

以上が、CSSを使って空の要素を非表示にする方法となります。