The :empty pseudo-class in CSS targets elements that have absolutely no content, including text (even whitespace), HTML elements, or other nodes. An element counts as :empty if it has no child nodes and contains no invisible characters like spaces or line breaks. Common use cases include hiding empty containers (e.g., .box:empty { display: none; }) and styling empty form fields (e.g., highlighting empty inputs with a red border). However, be cautious with whitespace, comments, or dynamically added content, as even a single space invalidates :empty, and JavaScript changes won’t automatically update its behavior.

The :empty pseudo-class in CSS targets elements that have no content—meaning they don’t contain any text (including whitespace), HTML elements, or other nodes. It’s useful when you want to apply styles or behaviors only to elements that are truly empty.

When does an element count as :empty?

An element is considered :empty if it meets both of these conditions:

• It has no child nodes (text or elements).
• It doesn't contain even a single space, line break, or other invisible character.

For example:

<div></div> <!-- This matches :empty -->
<div> </div> <!-- This does NOT match :empty because of the space -->
<div><span></span></div> <!-- Also does NOT match :empty because it contains an element -->

So if you're trying to style or hide empty containers, :empty can be handy—but be careful with whitespace.

Common use cases for :empty

One of the most common uses of :empty is hiding placeholder or dynamically filled elements that end up empty. For instance, imagine a layout where some boxes might not get data due to API issues or conditional rendering.

You could do something like this:

.box:empty {
  display: none;
}

This hides .box elements that are empty, which helps avoid awkward blank spaces in your layout.

Another case is form validation. You might want to highlight fields that are required but left empty:

input:empty {
  border: 1px solid red;
}

Keep in mind though, this only works if the input is truly empty. If someone types and then deletes everything, it will still match :empty.

Things to watch out for

Here are a few gotchas when using :empty:

• Whitespace matters: Even a single space or newline inside an element makes it not empty.
• Comments and HTML entities don’t count as content: So <div><!-- comment --></div> still counts as empty.
• Dynamic content may confuse it: If JavaScript adds or removes content after page load, :empty won’t automatically update its behavior. That means if you’re relying on :empty for styling, you might need to handle updates via JavaScript too.

If you're working with templates or frameworks that sometimes leave behind empty tags, :empty can help keep your UI clean without extra scripting.

Final thoughts

:empty is a simple selector that works well for specific scenarios like hiding empty containers or styling empty inputs. But since it's sensitive to even small bits of content or whitespace, it pays to double-check how your HTML is structured.

That’s basically all you need to know to use :empty effectively.

The above is the detailed content of How does the :empty pseudo-class work?. For more information, please follow other related articles on the PHP Chinese website!