中は空に見えるのに:emptyが合わない？CSSで空白・コメント・子要素を比べよう

文字が入っていない欄へ「まだありません」と案内を出したい。CSSの:emptyを使ったら、見た目は空なのに案内が出ない。HTMLの中に残った改行や空白が関係しているかもしれないよ。

このページの目標は、画面に文字が見えない状態と、要素が空である状態を分けること。必要なのはブラウザだけ。作例は架空の箱を切り替えるだけで、外部へ送信せず、保存もしないよ。

:emptyは、空の要素を選ぶ指定

:emptyは、要素の状態に応じて選ぶ「擬似クラス」というCSSの指定。2026年10月27日に確認したMDNの説明では、子の要素や、空白を含むテキストがない要素を対象にする。コメントは空かどうかの判定に影響しないと説明されている。

<div class="sample"></div>

.sample:empty {
  border-style: dashed;
  background: #fff1a6;
}

この例では、中に何も入れていない箱へ色と点線を付ける。HTMLのタグを増やさず、いつものdivへ状態の条件を足しているんだ。

四つの状態を切り替える

ページ内の作例で、次を一つずつ選んでみよう。

一致したときは、箱の色だけでなく「一致」という文字も表示する。選んだ状態、HTMLの例、子ノードの数を並べて確認しよう。ノードは、ブラウザが文書を扱うときの部品。文字、コメント、要素などがそれぞれ部品になる。

コメントだけの箱には部品が一つあっても、:emptyには一致する。「子ノードが0個」と:emptyの条件を同じ式だと思わないことが大切だよ。

改行も、HTMLの中では文字になることがある

<div class="sample">

</div>

読みやすいようにタグの間へ改行を入れた場合も、文字のデータが残る。画面上でその空白が目立たなくても、今回のブラウザでは:emptyに一致しなかった。

反対に、コメントだけを入れた次の例は一致した。

<div class="sample"><!-- あとで内容を入れる --></div>

「見えないものを全部無視する」という指定ではないんだ。空のspanや、表示を隠した子要素がある場合も、親の中には要素があることを分けて考えよう。

仕様の説明と、使うブラウザの動作を合わせて見る

MDNには、Selectors Level 4の:emptyでは空白の扱いが変更された一方、その説明時点ではブラウザがまだ対応していないという注記もある。仕様案を読んで、すべての環境で空白が無視されると決めつけないようにしよう。

作例は実際のブラウザのmatches(':empty')で判定し、その結果を表示する。今後ブラウザの実装が変わる可能性もあるので、想定と違うときは作例の表示と対象ブラウザの対応状況を確認してね。

フォームの未入力チェックには、そのまま使わない

inputの入力値が空かどうかは、子要素の有無とは別の話。フォームの必須入力ならrequired、JavaScriptの値の確認ならvalueなど、調べたい対象に合う方法を選ぶ。

リセットで「何もなし」へ戻せる。空かどうかを見分けた後は、HTMLの段落と改行やフォームのrequiredも、目的の違いをつなげて読んでみよう。