DEV Community

Md Shahab Uddin
Md Shahab Uddin

Posted on

Empty Pseudo Class

There are so many Pseudo Class and ":empty" is one of them.Let's break dowth is pseudo class.

Empty pseudo class is applied on empty element.At First we need to learn what are empty elements. There are certain requiements to become an empty element.
Some examples of empty elements are.

<div></div> 
<div><!--This is a comment --></div>
Enter fullscreen mode Exit fullscreen mode

Even a space inside an element cause the element to be non empty
element.Even if we add one letter or one sentence it becomes a non empty element such as:

 <div>P</div> 
 <div>Lorem ipsum dolor sit amet.</div>
 <div> </div>
Enter fullscreen mode Exit fullscreen mode

If we want to target those empty element, we can use empty pseudo class.Let's target all empty elements in CSS:

:empty {
   //Your code here
}
Enter fullscreen mode Exit fullscreen mode

If you want to target specific empty element such as empty table cell use this

td:empty {
    background: red;
}
Enter fullscreen mode Exit fullscreen mode

I hope you get it How to use empty pseudo class

Top comments (0)