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;
}

ライブデモ

emptyelement. hidden

CSS emptyelement. hidden demo.

プレビュー全画面表示

empty. time to alternativetext

CSS empty. time to alternativetext demo.

プレビュー全画面表示

empty. statedisplay

CSS empty. statedisplay demo.

プレビュー全画面表示

実務での使いどころ

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

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

注意点

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

アクセシビリティ

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

参考リンク