:empty
:empty
は CSS の擬似クラスで、子を持たない要素を表します。子とは要素のノードまたは文字列 (ホワイトスペースを含む) です。コメント、処理指示、 CSS の content
は要素が空であるかどうかの判断には影響しません。
試してみましょう
メモ: Selectors Level 4 では、 :empty
擬似クラスは :-moz-only-whitespace
のような動作に変更されましたが、現在これに対応しているブラウザーはありません。
構文
:empty
例
HTML
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>
<div class="box">
<p>
<!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
</p>
</div>
CSS
css
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
結果
アクセシビリティの考慮
スクリーンリーダーなどの支援技術は、空の対話型コンテンツを解釈することができません。すべての対話型コンテンツは、対話型コントロールの親要素 (アンカーやボタンなど) に文字列の値を設定することで作成されるアクセシブル名を持つ必要があります。アクセシブル名は、支援技術に有益な情報を通信する API である アクセシビリティツリー で使用されます。
対話型コントロールのアクセシブル名を提供する文字列は、プロパティの組み合わせを使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。
仕様書
Specification |
---|
Selectors Level 4 # the-empty-pseudo |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
:-moz-only-whitespace
非標準 – 接頭辞付きで、 Selectors Level 4 の変更を実装:blank
Experimental