Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

:empty

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

空要素条件付きスタイル

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:empty
1
12
1
3.1
18
2
matches whitespace

空白のある要素と一致します
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS 
.container:empty {
  display: none;
}
.message:empty::before {
  content: "No data";
  color: #6b7280;
}

ライブデモ

空要素の非表示

CSS の 空要素の非表示 パターンです。

プレビュー全画面表示

空の時に代替テキスト

CSS の 空の時に代替テキスト パターンです。

プレビュー全画面表示

空の状態表示

CSS の 空の状態表示 パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

注意点

  • HTMLのホワイトスペース（改行やスペース）も子ノードとして扱われるため、テンプレートエンジンの出力に注意してください。

アクセシビリティ

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

参考リンク