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>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Lists</title>
    <style>
        li:empty {
            display: none;
        }
    </style>
</head>
<body>

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

</body>
</html>


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

Lists

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