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

メモ: Selectors Level 4 では、 :empty 擬似クラスは :-moz-only-whitespace のような動作に変更されましたが、現在これに対応しているブラウザーはありません。

/* 内容を含まない <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 in older browsers 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 の定義
草案 :-moz-only-whitespace のような動作に変更
Selectors Level 3
:empty の定義
勧告 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
:emptyChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 9.5Safari 完全対応 3.1WebView Android 完全対応 2Chrome Android 完全対応 18Edge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 10.1Safari iOS 完全対応 3.1Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明

関連情報

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

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