:empty
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
:empty は CSS の擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列（ホワイトスペースを含む）です。コメント、処理指示、 CSS の content は要素が空であるかどうかの判断には影響しません。
試してみましょう
div:empty { outline: 2px solid deeppink; height: 1em; } <p>コンテンツのない要素:</p> <div></div> <p>コメントのある要素:</p> <div><!-- コメント --></div> <p>内部に空の要素を持つ要素:</p> <div><p></p></div> メモ: Selectors Level 4 では、 :empty 擬似クラスは :-moz-only-whitespace のような動作に変更されましたが、現在これに対応しているブラウザーはありません。
構文
css
:empty { /* ... */ } アクセシビリティ
スクリーンリーダーなどの支援技術は、空の対話型コンテンツを解釈できません。すべての対話型コンテンツには、アクセシブル名が必要です。アクセシブル名は、対話型コントロールの親要素（アンカー、ボタン など）にテキスト値を指定して作成してください。アクセシブル名は対話型コントロールを、支援技術に有用な情報を伝達する API であるアクセシビリティツリーに公開します。
インタラクティブコントロールのアクセシブル名を提供するテキストは、画面から視覚的に削除するものの、支援技術によって解析可能なままにするプロパティの組み合わせを使用して非表示にすることができます。これは、アイコンのみによってその目的を伝えるボタンに一般的に使用されます。
例
HTML
html
<div class="box"><!-- ライム色になります。 --></div> <div class="box">ピンク色になります。</div> <div class="box"> <!-- このコメントの周囲には空白があるため、古いブラウザーではピンク色になります。 --> </div> <div class="box"> <p> <!-- このコメントの周囲には統合することができない空白や要素があるため、すべてのブラウザーでピンク色で表示されます。 --> </p> </div> CSS
css
.box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; } 結果
仕様書
| Specification |
|---|
| Selectors Level 4 # the-empty-pseudo |
ブラウザーの互換性
関連情報
:-moz-only-whitespace– 接頭辞付きで、 Selectors Level 4 の変更を実装:blank