: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 the first example, we should see the 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 go off. 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 a recommended feature.