# 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`
```html
<!-- Matches :empty -->
<div></div>

<!-- Does NOT match :empty (contains whitespace) -->
<div> </div>
```

### `:blank`
```html
<!-- 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]]