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>
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>
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
}
If you want to target specific empty element such as empty table cell use this
td:empty {
background: red;
}
I hope you get it How to use empty pseudo class
Top comments (0)