CSS :blank Pseudo-class
The :blank pseudo-class selects elements that are empty or contain only whitespace. It is an improvement over :empty, which considers whitespace to be content.
1. The Concept
While :empty is strict (an element must have zero children, not even a space), :blank is more forgiving. It matches elements that contain nothing, or only whitespace characters (spaces, tabs, line breaks).
2. Difference from :empty
:empty
<!-- Matches :empty -->
<div></div>
<!-- Does NOT match :empty (contains whitespace) -->
<div> </div>:blank
<!-- Matches :blank -->
<div></div>
<!-- Matches :blank (whitespace is ignored) -->
<div> </div>3. Browser Support
As of 2024, browser support for the standard :blank pseudo-class is very limited.
- Firefox: Supports a prefixed version
:-moz-only-whitespace. - Chrome/Safari: Not yet supported.
Because of this, it is not yet safe to use in production without polyfills or waiting for better support.
programming/css/css programming/css/empty-pseudo-class programming/css/pseudo-classes-and-pseudo-elements