:empty Selector In CSS

shamgurav96

Sham Gurav

Posted on April 8, 2022

:empty Selector In CSS

The :empty CSS pseudo-class represents any element that has no children. Children can be either element nodes or text (including whitespace).

HTML Code -

<div> Hello World !!!</div>
<div> <!-- Empty --> </div>
<div> GoodBye World !!! </div>
Enter fullscreen mode Exit fullscreen mode

CSS Code -

div:empty {
     background-color: #ff0000;
}
Enter fullscreen mode Exit fullscreen mode

Output -

:empty Selector Demonstration

💖 💪 🙅 🚩
shamgurav96
Sham Gurav

Posted on April 8, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Understanding CSS Frameworks
webdev Understanding CSS Frameworks

July 10, 2024

:empty Selector In CSS
javascript :empty Selector In CSS

April 8, 2022

Day-20 Training at Ryaz
javascript Day-20 Training at Ryaz

February 9, 2022

Working with Bootstrap Notes: Part 1
javascript Working with Bootstrap Notes: Part 1

December 10, 2021