:empty

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

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

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

構文

Error: could not find syntax for this item

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

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

.box:empty {
  background: lime;
}

結果

アクセシビリティの考慮

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

対話型コントロールのアクセシブル名を提供する文字列は、[プロパティの組み合わせ](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener)を使用して非表示にすることができ、画面からは視覚的に削除されますが、支援技術からは解釈できるようにすることができます。これは、アイコンだけで目的を示すボタンでよく使用されます。

仕様書

Specification
Selectors Level 4
# the-empty-pseudo

ブラウザーの互換性

BCD tables only load in the browser

関連情報