:empty CSS Pseudo Class

The :empty pseudo-class in CSS is used to select elements that have no children at all, including text nodes. This means that an element targeted by :empty must not contain any text, whitespace, or other elements. It is a structural pseudo-class, which allows developers to style elements dynamically based on their content state. This can be particularly useful when designing layouts where the presence or absence of content affects the visual presentation.

One key characteristic of :empty is that even invisible characters or spaces within an element will prevent it from being considered empty. For example, an element with a single space character is not considered empty, which is an important detail when working with dynamic content generated by JavaScript or server-side scripts. This makes :empty different from selectors that simply check for visible content, like :first-child or :nth-child.

Developers often pair :empty with other CSS properties to improve user experience. For instance, you might apply a different background-color or display style to elements that contain no content. This is useful for highlighting missing content areas in a layout, providing placeholder styling, or even hiding elements entirely when they are empty.

Here is a simple example of using :empty:

HTML:

<div class="box"></div>
<div class="box">Content here</div>

CSS:

.box:empty {
  background-color: #f0f0f0;
  border: 2px dashed #ccc;
  min-height: 50px;
}

In this example, the first <div> will be styled with a light gray background and a dashed border because it is empty, while the second <div> with content remains unaffected. This demonstrates how :empty can be leveraged to target elements dynamically based on whether they contain content or not, offering a flexible approach to content-aware styling.

Another practical use of :empty is in conjunction with pseudo-elements such as ::before or ::after, to display placeholder text or icons in empty containers without altering the actual HTML content.