:empty

概要

テキストノードや子要素が一切ない空の要素を選択する擬似クラスです。動的にコンテンツが読み込まれるコンテナや、APIからのデータが空の場合のスタイリングに有用です。ホワイトスペース（スペースや改行）も子ノードとして扱われるため、完全に空の要素のみにマッチします。

対応ブラウザ

基本構文

.container:empty {
  display: none;
}
.message:empty::before {
  content: "データがありません";
  color: #6b7280;
}

実務での使いどころ

• 空状態のフォールバック表示

  APIからデータが返されない場合に、:emptyと::beforeを使って「結果がありません」などのプレースホルダーメッセージを表示します。

注意点

アクセシビリティ

• ::beforeで挿入したコンテンツはスクリーンリーダーで読み上げられない場合があるため、重要なメッセージはaria-label等で補完してください。

参考リンク

• MDN Web Docs — :empty