DEV Community

Cover image for Unveiling the Power of the :empty() CSS Pseudo-Class
Matt Miller
Matt Miller

Posted on • Edited on

Unveiling the Power of the :empty() CSS Pseudo-Class

Introduction:
In the realm of CSS selectors, the :empty pseudo-class stands out as a formidable tool for targeting elements devoid of any children. Whether you're seeking to style empty containers differently or apply dynamic effects based on content presence, :empty proves to be a versatile and valuable asset in your styling arsenal.

Syntax:
The syntax for utilizing the :empty pseudo-class is elegantly simple:

:empty {
  /* CSS rules */
}
Enter fullscreen mode Exit fullscreen mode

This pseudo-class selects elements that have no children, regardless of whether those children are element nodes or text content (including whitespace).

Examples:
Let's delve into a couple of examples to grasp the practical application of the :empty pseudo-class:

<div class="box"><!-- I will be lime. --></div>
<div class="box">I will be pink.</div>
<div class="box">
  <!-- I will be pink in older browsers because of the whitespace around this comment. -->
</div>
<div class="box">
  <p>
    <!-- I will be pink in all browsers because of the non-collapsible whitespace and elements around this comment. -->
  </p>
</div>
Enter fullscreen mode Exit fullscreen mode
.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}
Enter fullscreen mode Exit fullscreen mode

In this example, the boxes with no visible content will be styled with a lime background, while those with content will retain the pink background.

Accessibility Concerns:
It's crucial to consider accessibility implications when utilizing the :empty pseudo-class. Assistive technologies like screen readers rely on accessible names to parse interactive content accurately. Therefore, ensuring that interactive elements have an accessible name is paramount for accessibility compliance.

Combined instance with :not()

section:not(:empty) {
    background: red;
    padding: 1rem;
}

section:empty {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Conclusion:
The :empty pseudo-class empowers CSS developers with the ability to target elements lacking content dynamically. By understanding its syntax, applications, and accessibility considerations, you can wield this pseudo-class effectively to enhance both the aesthetics and accessibility of your web projects. Incorporate the :empty pseudo-class into your CSS toolkit to unlock new possibilities in styling and user experience design.


Enjoying the content? If you'd like to support my work and keep the ideas flowing, consider buying me a coffee! Your support means the world to me!

Buy Me A Coffee

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay