CSS3 Selectors: Pseudo-class :empty

This entry is part 37 of 40 in the series CSS3 Selectors

:empty can be an extremely useful pseudo-class.

It represents an element with no content.

Imagine we’ve got a dynamically generated list in our page that has no contents; we can hide it using :empty.

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
        li:empty {
            display: none;

<h4>British Pop</h4>
    <li>Cold Play</li>
    <li>Depeche Mode</li>


If we remove the empty selector, the last empty item in the list will be displayed.


Series Navigation<< CSS3 Selectors: Only-of-type
CSS3 Selectors: Pseudo-element ::before >>

Leave a comment

Leave a Reply