Widely availableSupported across all major browsers. Safe to use in production.
Selectors Widely available

:empty

The :empty CSS pseudo-class matches elements without child elements.

Selectors

Overview

The :empty CSS pseudo-class matches elements without child elements.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:empty
1
12
1
3.1
18
2
matches whitespace

Matches elements with whitespace
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

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

Live demo

emptyelement. hidden

CSS emptyelement. hidden demo.

PreviewFullscreen

empty. time to alternativetext

CSS empty. time to alternativetext demo.

PreviewFullscreen

empty. statedisplay

CSS empty. statedisplay demo.

PreviewFullscreen

Use cases

  • Using :empty

    The :empty CSS pseudo-class matches elements without child elements.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features