CSS :empty Pseudo Class
Use the :empty CSS pseudo-class for selecting the empty elements. Read about the pseudo-class and practice with examples.
The CSS :empty pseudo-class selects elements that have no children at all — no child elements and no text content. It is most useful for styling or hiding "empty" containers that come back from a template, CMS, or API with nothing inside them, so you can collapse the gap they would otherwise leave on the page.
This page covers how :empty decides whether an element is empty, the whitespace gotcha that trips most people up, a practical use for hiding empty blocks, and runnable examples you can edit.
What counts as empty
An element matches :empty when, between its opening and closing tag, there is nothing — no text, no comments-as-content, and no nested elements:
- If a closing tag directly follows the opening tag (
<p></p>), the element is empty. - Self-closing elements such as
<hr />,<br />, and<img />have no possible children, so they always match:empty. - The
::beforeand::afterpseudo-elements do not count as children. An element with generated content from::before/::afterstill matches:emptybecause that content is not part of the DOM.
The whitespace gotcha
Whitespace counts as text content, so an element is not empty if it contains spaces, tabs, or line breaks:
<p></p>
<!-- Matches :empty — truly empty -->
<p>
</p>
<!-- Does NOT match — the newline and spaces are text content -->This is the most common reason :empty "doesn't work": a template that pretty-prints its output leaves whitespace between the tags. If you need to match elements that contain only whitespace, look at the :blank pseudo-class (still experimental) or strip the whitespace in your markup. To target elements by other conditions instead, see :not().
Syntax
CSS :empty syntax example
:empty {
css declarations;
}Example of the :empty selector with the <p> tag:
CSS :empty example code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:empty {
width: 200px;
height: 30px;
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p></p>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Example of the :empty selector with the <div> tag:
CSS :empty another code example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:empty {
background-color: #ccc;
padding: 15px;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<h2>:empty selector example</h2>
<p>
Lorem Ipsum is the dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<div></div>
<p>
Lorem Ipsum is simply dummying text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Hiding empty elements
A frequent real-world use is collapsing an element that arrived empty so it does not leave a margin, border, or background gap. Combine :empty with display: none:
/* An alert box that should disappear when it has no message */
.alert:empty {
display: none;
}Now <div class="alert"></div> is removed from the layout, while <div class="alert">Saved!</div> renders normally. This keeps your CSS in charge of the visual result instead of requiring server-side logic to omit the element.
Browser support and version
:empty is supported in all modern browsers. It was defined in two specifications, both with the same behavior:
Selectors Level 4 maintains the same behavior for :empty as Level 3, matching only elements with absolutely no children — text, comments, and nested elements all disqualify a match.