Empty Pseudo Class

shahab570

Md Shahab Uddin

Posted on May 31, 2021

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

💖 💪 🙅 🚩
shahab570
Md Shahab Uddin

Posted on May 31, 2021

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

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024

Modern C++ for LeetCode 🧑‍💻🚀
leetcode Modern C++ for LeetCode 🧑‍💻🚀

November 29, 2024