Written by Kasumi

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で要素が空かどうか判別。任意のスタイルを適用する方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

HTML・CSSのみで開閉アコーディオンを作る【JS不要簡単】

2020.04.12
4108
HTMLCSS プログラミング

【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

2022.01.19
9262
HTMLCSS プログラミング

【CSS】select(セレクト)要素の矢印を消して画像にする方法

2022.01.09
3147
HTMLCSS

【CSS】aタグ内にaタグを入れる方法【簡単】

更新日:2019.11.28
1100