# CSS `:empty` Pseudo-class

The `:empty` pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace).

## 1. What counts as "Empty"?

An element is considered empty if it contains **nothing** between its opening and closing tags.

*   **Empty:** `<div></div>`
*   **Empty:** `<div><!-- This is a comment --></div>` (Comments are ignored)
*   **Not Empty:** `<div> </div>` (Whitespace is a text node)
*   **Not Empty:** `<div><span></span></div>` (Contains an element)
*   **Not Empty:** `<div>Hello</div>` (Contains text)

## 2. Basic Usage

This is particularly useful for hiding containers that are dynamically populated but look ugly when empty (e.g., having a border or padding).

```css
.alert {
  background: #ffcccc;
  border: 1px solid red;
  padding: 10px;
}

/* Hide the alert if it has no content */
.alert:empty {
  display: none;
}
```

## 3. The Whitespace Issue

A common pitfall is that whitespace (spaces, tabs, line breaks) counts as content.

```html
<!-- This is NOT :empty because of the line break -->
<div class="box">
</div>
```

If your HTML formatter adds line breaks or indentation inside elements, `:empty` will not match.

## 4. `:not(:empty)`

Conversely, you can style an element only if it *does* have content.

```css
/* Only apply padding if there is content inside */
.notification:not(:empty) {
  padding: 1rem;
  border: 1px solid #ccc;
}
```

[[programming/css/css]]
[[programming/css/pseudo-classes-and-pseudo-elements]]
[[programming/css/selectors]]