:empty

The most useless thing in CSS that I can come up with is :empty pseudo-class. In theory :empty should apply to elements that have no children and no content. Sounds like something that might be useful.

In first example we should see second paragraph recognized as empty.

<p class="empty-check">I am not empty.</p>
<p class="empty-check"></p>

.empty-check {
    background-color: azure;
    padding: 10px;
}
.empty-check:empty {
    background-color: firebrick;
    padding: 20px;
}

Let’s see:

I am not empty.

Seems to work fine. But then, code

<p class="empty-check"> </p>

shows up as:

In other words, not empty. White space is the culprit. Quite logical, one could say. A space after all is content as well. Unfortunantely, for coding convenience coders often write code like that:

<p class="empty-check">
    <?php echo $text; ?>
</p>

For empty $text the effect will be:

<p class="empty-check">

</p>

Again, not empty. If someone has a lot of self-discipline, they can write it like that:

<p class="empty-check"><?php
    echo $text;
?></p>

In case of empty $text the HTML element will be rendered empty. But it’s hard to expect something like that in projects where there are many coders and dozens of templates. Sooner or later this bomb is gonna explode. Someone might not know, or not remember, or some lonely space will show up somewhere by mistake. One cannot know for sure.

Thus, :empty pseudo-class is an interesting, yet, due to general unpredictibility, not recommended feature.