【入門編】 empty疑似クラスによる空要素の判定 – CSS実践ガイド

こんにちは！フロントエンドの世界へようこそ。毎日コードと向き合っていると、「あれ？思った通りに動かないな」と立ち止まってしまう瞬間がありますよね。でも、それはあなたが着実に一歩ずつ進んでいる証拠です。全然焦る必要はありませんからね。

今日は、CSSの中でも地味に見えて、実はめちゃくちゃいい仕事をしてくれる`:empty`（エンプティ）疑似クラスについてお話しします。

「中身が空っぽのときだけ、デザインを変えたいな……」

そんなWeb制作の現場でよくあるお悩みを、この`:empty`くんがフワッと解決してくれます。つまずきやすい「落とし穴」も一緒に優しく紐解いていきましょう！

—

1. `:empty` ってどんなもの？（イメージで理解しよう）

まずは身近な例え話から始めてみましょう。

あなたのお部屋に、お気に入りの「小物入れの引き出し」があると想像してみてください。

中にアクセサリーや鍵が入っているときは、そのまま置いておきますよね。
でも、中身が全部なくなって完全に空っぽになったら、引き出しをパタンと閉じるか、片付けたいと思いませんか？

CSSの `:empty` は、まさにこの「完全に空っぽの引き出し」を見つけ出すセンサーのようなものです。

HTMLの要素（`

` や `` など）の中に、文字（テキスト）も、他のタグ（子要素）も、何にも入っていない状態のときだけ、特別なスタイルを当てることができる。それが `:empty` 疑似クラスです。

—

2. 基本的な書き方を見てみよう！

では、実際にエディタに貼り付けて試せるコードを見てみましょう。
ここでは、「お知らせバッジ」を例にしてみます。メッセージの数（「3」とか「10」とか）が入っているときは赤く表示して、メッセージが「0」で文字が入っていないときは、バッジ自体をきれいに消してしまうコードです。

/ CSS側 /

/ まずは共通のバッジのスタイル /
.badge {
display: inline-block;
padding: 4px 8px;
background-color: #ff4757; / かわいい赤色 /
color: white;
border-radius: 12px;
font-size: 12px;
font-weight: bold;
}

/
ここが魔法のポイント！
中身が「空っぽ（:empty）」のバッジは、画面から非表示にします。
/
.badge:empty {
display: none; / 完全に消えてもらいます /
}

どうでしょうか？
2つ目の `

` は、中身が空っぽなので `:empty` が反応し、`display: none;` が効いて画面からきれいに消えてくれます。

「JavaScriptを使って『中身が空ならクラスを追加する』っていう難しい処理を書かなきゃいけないのかな……」と悩んでいたそこのあなた、大丈夫です。CSSだけで、こんなにシンプルに解決できるんですよ！

—

3. 【超重要】100%つまずく！「目に見えない空気」の罠

ここからが、このお話で一番大切なところです。
プロのエンジニアでも、新人の頃に必ず一度は「あれ！？ `:empty` を書いたのに消えないぞ！？」と頭を抱えます。

その原因のほとんどは、「目に見えない空気（空白や改行）」が入っているからです。

ちょっと次のコードを見てみてください。

私たち人間の目から見ると、パターンAもBもCも、全部「中身は空っぽ（何も書いてない）」に見えますよね。

でも、CSS（ブラウザ）にとっては大違いなんです！

パターンA ➔ 完璧な空っぽ！ （`:empty` が効く！🎉）
パターンB ➔ 「改行」という文字が入っていると判定されます。 （`:empty` が効かない！😭）
パターンC ➔ 「半角スペース」という文字が入っていると判定されます。 （`:empty` が効かない！😭）

CSSからすると、「おっ、改行やスペースっていう文字が入ってるじゃん！空っぽじゃないね！」となってしまうのです。

対処法は「ギュッと縮めて書く」こと

もし `:empty` を使いたいときは、HTMLを書くときにタグの間を改行せず、`

` のように隙間なくピタッとくっつけて書くのが鉄則です。

実務でWordPressなどのシステムを使っていると、システムが自動的に改行を挟んでしまって `:empty` が効かなくなる……なんていう「現場あるある」のバグもあります。もし動かないときは、ブラウザのデベロッパーツール（検証画面）を開いて、タグの間に余計なスペースや改行が入っていないか、優しくチェックしてあげてくださいね。

(補足：最近の新しいCSSのルールでは、スペースがあっても空とみなす仕組み（`:blank` 疑似クラスなど）も議論されていますが、現時点のブラウザで最も安全で確実に動くのは、この「ピタッとくっつけて書く」方法です！)

—

4. 現場で使える！ちょっとオシャレな応用テクニック

最後に、実際のWebサイトでよく使われる、少し応用的なテクニックを紹介します。
「データがないときは、自動的に『データがありません』というプレースホルダー（仮の文字）をグレーで表示する」という親切な設計です。

HTMLにわざわざ「データがありません」と書き込む必要はありません。CSSに任せてみましょう！

・美味しいリンゴ

・焼きたてのパン

/ リスト全体の枠組み /
.shopping-list {
border: 2px dashed #ccc;
padding: 16px;
border-radius: 8px;
min-height: 50px; / 中身がなくてもある程度の高さを確保 /
background-color: #fafafa;
}

/
リストが「空っぽ（:empty）」のときだけ、
擬似要素（::before）を使って、メッセージを自動で表示します！
/
.shopping-list:empty::before {
content: “カートは空っぽです。お買い物を始めましょう！”;
color: #999; / 優しいグレー /
font-size: 14px;
display: block;
text-align: center;
}

こうしておけば、JavaScriptなどでリストの中身が空になった瞬間に、自動的に「カートは空っぽです〜」というメッセージがフワッと現れます。
いちいち手動で文字を書き換える必要がないので、運用もすごく楽になりますよ。

—

まとめ：一歩ずつ、焦らずに進みましょう！

今日のポイントを振り返ってみましょう。

1. `:empty` は、中身が「完全に空」の要素を見つける魔法のセンサー
2. タグの中に「改行」や「スペース」が1つでもあると、空っぽだと認めてもらえない
3. 使うときは、HTMLのタグを `

` とピタッとくっつけて書くのがコツ！

最初は「なんで動かないんだろう？」とイライラしてしまうこともあるかもしれません。でも、CSSはとても素直な子です。ルールさえ分かってしまえば、必ずあなたの頼もしい味方になってくれます。

この記事を読みながら、ぜひ手元でコードを動かしてみてくださいね。
「動いた！」というその小さな感動の積み重ねが、あなたを素敵なクリエイターに育ててくれます。

大丈夫、あなたのペースで、楽しみながら学んでいきましょう！