CSS :empty Selector

What You’ll Learn

The :empty pseudo-class targets elements that contain no child elements and no text. It is useful for highlighting blank containers, handling dynamic content gaps, and building cleaner layouts.

Introduction

The :empty selector in CSS is a pseudo-class used to match elements that have no children at all — no element nodes and no text nodes.

It lets you apply styles specifically to completely blank containers, which is helpful when managing layout gaps, styling placeholders, or debugging dynamically generated content.

Definition and Usage

Append :empty to any element selector with no space before the colon: div:empty, p:empty, or .card:empty. Styles apply only while the element remains truly empty.

📝 Syntax

The syntax for the :empty pseudo-class is:

element:empty {
  /* CSS properties */
}

Basic Example

:empty {
  border: 2px dashed #ef4444;
  background-color: #fef2f2;
  min-height: 3rem;
}

Syntax Rules

• An element matches only when it has zero child elements and zero text nodes.
• Whitespace (spaces, tabs, line breaks) counts as a text node and prevents a match.
• HTML comments alone do not prevent :empty from matching in modern browsers.
• Self-closing elements like <br> or <img> inside a container mean it is not empty.
• Combine with classes for scoped styling: .message:empty.

Related Selectors

• :blank — matches elements with no content or only whitespace (limited browser support)
• :not(:empty) — targets elements that do contain children or text
• :has() — parent selector; useful for styling containers based on child content
• ::before / ::after — add placeholder text to empty elements with generated content

When to Use :empty

:empty shines when you need to react to blank markup:

• Dynamic lists — Highlight or hide list items that JavaScript has not yet populated.
• Placeholder styling — Show a dashed border or minimum height on empty message boxes.
• Layout debugging — Visually spot containers that should contain content but do not.
• CMS content — Style optional content areas that may be left blank by editors.
• Form feedback — Style error or hint containers before validation messages are inserted.

Examples Gallery

Practice :empty with basic highlighting, scoped selectors, dynamic placeholders, and hiding blank containers.

<style>
  :empty {
    border: 2px dashed #ef4444;
    background-color: #fef2f2;
    min-height: 3rem;
  }

  .container p {
    padding: 0.65rem;
    background-color: #ecfdf5;
  }
</style>

<div class="container">
  <p>This paragraph has content.</p>
  <p></p>
  <div class="box"></div>
</div>

.message:empty {
  display: block;
  padding: 1rem;
  border: 1px dashed #94a3b8;
  border-radius: 0.5rem;
  color: #64748b;
  font-style: italic;
}

.message:empty::before {
  content: "No messages yet.";
}

.card-body:empty {
  min-height: 6rem;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  border-radius: 0.5rem;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.todo-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.todo-list li:empty {
  display: none;
}

⚠️ Common Pitfalls

• Whitespace matters — <p> </p> contains a space text node and does not match :empty. Remove all characters between tags.
• Line breaks count — Pretty-printed HTML with a newline inside a tag also creates a text node.
• Hidden elements still count — A child with display: none or zero size is still a child; the parent is not empty.
• Self-closing tags — <img>, <br>, and <input> inside a container prevent :empty from matching.
• Not the same as :blank — Do not expect :empty to match whitespace-only elements; use :blank where supported instead.

Whitespace Example

<!-- Does NOT match :empty (space inside) -->
<p> </p>

<!-- DOES match :empty -->
<p></p>

♿ Accessibility

• Do not hide meaningful empty regions — If an empty container conveys structure, ensure assistive technology users still understand the layout.
• Placeholder text via CSS — Content added with ::before may not always be announced by screen readers; prefer real text when the message is important.
• Loading states — Pair skeleton loaders with aria-busy="true" on the container so users know content is loading.
• Do not rely on color alone — Combine dashed borders with labels or text when empty states need to be understood clearly.

💡 Best Practices