CSS:empty 疑似クラスは、子を持たない要素を表します。子とは要素のノードまたは文字列(ホワイトスペースを含む)です。コメントや処理の指示は要素が空であるかどうかの判断には影響しません。

/* 内容を含まない <div> 要素を選択 */
div:empty {
  background: lime;
}

構文

:empty

HTML

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
    <!-- I will be pink because of the whitespace around this comment. -->
</div>

CSS

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

結果

アクセシビリティへの配慮

読み上げソフトのような支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である accessibility tree で使用されます。

対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

仕様書

仕様書 策定状況 コメント
Selectors Level 4
:empty の定義
草案 変更なし
Selectors Level 3
:empty の定義
勧告 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応1 あり199.53.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応2.1 ? あり4103.1 ?

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, ethertank
最終更新者: mfuji09,