The :empty pseudo-class

The :empty pseudo-class selects elements that have no children. This means the element must not contain any text, whitespace, or other elements. Very useful for styling empty elements or displaying special messages when content is empty.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The :empty pseudo-class</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 30px;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
            border-radius: 8px;
        }
        /* Example 1: Empty table cells */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .table td {
            border: 1px solid #ddd!important;
            padding: 10px;
        }
        .table td:empty {
            position: relative;
        }
        .table td:empty::after {
            content: "No data";
            color: #cc0000!important;
            font-style: italic;
            font-size: 0.9em;
        }
        
        /* Example 2: Empty paragraphs */
        p {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd!important;
            border-radius: 4px;
        }
        p:empty {
            border: 2px dashed #ffd700!important;
            height: 40px;
        }
        
        /* Example 3: Empty div elements */
        .frame {
            margin: 10px 0;
            min-height: 50px;
            border: 1px solid #ddd!important;
            border-radius: 4px;
        }
        .frame:empty {
            border: 2px solid #4CAF50!important;
            background-size: 20px 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h3>Examples of :empty usage</h3>
        
        <h4>1. Table with empty cells:</h4>
        <table class="table">
            <tr>
                <td>Data 1</td>
                <td></td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td></td>
                <td>Data 5</td>
                <td></td>
            </tr>
        </table>

        <h4>2. Paragraphs:</h4>
        <p>This is a paragraph with content.</p>
        <p></p>
        <p>Another paragraph with content.</p>

        <h4>3. Frames:</h4>
        <div class="frame">Element with content</div>
        <div class="frame"></div>
        <div class="frame">Another element with content</div>

        <div class="explanation" style="margin-top: 20px; padding: 15px; background: #fff; border-left: 4px solid #4CAF50;">
            <h4>How does :empty work?</h4>
            <ul>
                <li>Selects elements without content (not even whitespace)</li>
                <li>In tables: shows warning for missing data</li>
                <li>For paragraphs: special background and dashed border</li>
                <li>For frames: background pattern and green border</li>
            </ul>
        </div>
    </div>
</body>
</html>

RESULT