CSSで要素が空かどうか判別。任意のスタイルを適用する方法

JavaScriptを使わず、CSSだけで要素が空かどうか判定。

空の場合、何かしらのメッセージを表示したい。

本記事ではこのような悩みを解決します。

実装サンプル

実装サンプルです。

ulタグ内が空の場合だけ、pタグでメッセージを表示してます。

実装手順は以下の通りです。

/*メッセージを非表示*/
p {
  display: none;
}
/*メッセージを表示*/
ul:empty + p {
  display: block;
}

要素が空かどうか判定するコード例です。

:empty擬似クラスを使います。

空を判定したい要素に対して、:empty擬似クラスを付与。

要素が空の場合だけ、ブロック内で指定したプロパティが適用されます。

本コード例では空の場合メッセージを表示したいので、あらかじめてpタグ等でメッセージを用意。

display: none;で非表示にして空を判定したい要素の隣に配置します。

:empty擬似クラスと結合子（+）を使い、要素が空の場合、隣接するpタグ要素をdisplay: block;で表示します。

以上で実装完了です。

CSSで要素が空かどうか判別。任意のスタイルを適用する方法について紹介しました。

以上で解説を終わります。