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

JavaScriptを使わず、CSSだけで要素が空かどうか判定。
空の場合、何かしらのメッセージを表示したい。
本記事ではこのような悩みを解決します。
実装サンプル
See the Pen
CSSで要素が空どうか判定する方法 by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
ulタグ内が空の場合だけ、pタグでメッセージを表示してます。
実装手順は以下の通りです。
:empty擬似クラスを使って要素が空かどうか判定
/*メッセージを非表示*/
p {
display: none;
}
/*メッセージを表示*/
ul:empty + p {
display: block;
}
要素が空かどうか判定するコード例です。
:empty擬似クラスを使います。
空を判定したい要素に対して、:empty擬似クラスを付与。
要素が空の場合だけ、ブロック内で指定したプロパティが適用されます。
本コード例では空の場合メッセージを表示したいので、あらかじめてpタグ等でメッセージを用意。
display: none;で非表示にして空を判定したい要素の隣に配置します。
:empty擬似クラスと結合子(+)を使い、要素が空の場合、隣接するpタグ要素をdisplay: block;で表示します。
以上で実装完了です。
まとめ
CSSで要素が空かどうか判別。任意のスタイルを適用する方法について紹介しました。
以上で解説を終わります。
目次