The empty pseudo-class
The empty pseudo-class specifies how
an empty element (containing no text) will
look like.
Syntax
selector:empty {
}
Example
In this example, the last li is empty,
but will still have a marker:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li></li>
</ul>
:
Example
Let's change the behavior for the
empty li tag:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li></li>
</ul>
li:empty {
border: 1px solid blue;
list-style-type: circle;
color: blue;
width: 100px;
}
:
Example
Let's hide the empty
li completely:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li></li>
</ul>
li:empty {
display: none;
}
:
See also
-
the
empty-cellsproperty
that tells the browser how to display the background and border of empty table cells
