CSS :empty Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 63 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :empty selector in CSS is used to select elements that do not have any children, including text nodes.

It allows you to apply styles specifically to elements that are completely empty, making it useful for managing layout gaps or handling special cases in dynamic content.

💡 Syntax

The signature of the :empty Selector is as follows:

Syntax

Copied

:empty {
    /* CSS properties */
}

The :empty selector applies to any HTML element that contains no child elements or text, including whitespace.

📝 Example

Here is an example demonstrating the use of the :empty selector:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :empty Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <p>This paragraph has content.</p>
        <p></p> <!-- This paragraph is empty -->
        <div class="box"></div> <!-- This div is empty -->
    </div>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for empty elements */
:empty {
    border: 2px dashed red;
    background-color: #ffe0e0;
    height: 50px;
    width: 50px;
}

/* Optional styling for elements with content */
.container p {
    padding: 10px;
    background-color: #e0ffe0;
}

In this example:

The empty <p> and <div> elements are selected by the :empty selector and given a dashed red border and a light red background.
Non-empty elements are unaffected by the :empty selector.

💬 Usage Tips

The :empty selector works only when the element contains no child nodes, including text nodes. Even a single space or a comment inside the element will cause it to no longer be considered "empty."
This selector is useful for identifying and styling elements that have no content, such as gaps in layout or placeholder elements in dynamic content.

⚠️ Common Pitfalls

Whitespace matters

An element with only whitespace (such as spaces or line breaks) is not considered empty by the :empty selector.

For example:
HTML
Copied
```
<p> </p> 
```
This <p> tag won’t be selected by :empty because of the whitespace.
Comments inside elements:

If an element contains only an HTML comment (e.g., ), it will not be considered empty by the :empty selector.

🎉 Conclusion

The :empty selector provides a simple way to target elements that contain no children, which can be highly useful for handling empty containers, ensuring proper layout, or debugging.

By using the :empty selector effectively, you can enhance the styling and behavior of your web pages when dealing with dynamically generated or user-generated content.