Psevdo-razred :empty

Psevdo-razred :empty izbere elemente, ki nimajo otrok. To pomeni, da element ne sme vsebovati niti besedila, niti presledkov, niti drugih elementov. Zelo uporabno za oblikovanje praznih elementov ali prikaz posebnih sporočil, ko je vsebina prazna.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Psevdo-razred :empty</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;
        }
        .vsebovalnik {
            max-width: 100%;
            margin: 20px auto;
            padding: 20px;
            border-radius: 8px;
        }
        /* Primer 1: Prazne celice v tabeli */
        .tabela {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .tabela td {
            border: 1px solid #ddd!important;
            padding: 10px;
        }
        .tabela td:empty {
            position: relative;
        }
        .tabela td:empty::after {
            content: "Ni podatka";
            color: #cc0000!important;
            font-style: italic;
            font-size: 0.9em;
        }
        
        /* Primer 2: Prazni odstavki */
        p {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd!important;
            border-radius: 4px;
        }
        p:empty {
            border: 2px dashed #ffd700!important;
            height: 40px;
        }
        
        /* Primer 3: Prazni div elementi */
        .okvir {
            margin: 10px 0;
            min-height: 50px;
            border: 1px solid #ddd!important;
            border-radius: 4px;
        }
        .okvir:empty {
            border: 2px solid #4CAF50!important;
            background-size: 20px 20px;
        }
    </style>
</head>
<body>
    <div class="vsebovalnik">
        <h3>Primeri uporabe :empty</h3>
        
        <h4>1. Tabela s praznimi celicami:</h4>
        <table class="tabela">
            <tr>
                <td>Podatek 1</td>
                <td></td>
                <td>Podatek 3</td>
            </tr>
            <tr>
                <td></td>
                <td>Podatek 5</td>
                <td></td>
            </tr>
        </table>

        <h4>2. Odstavki:</h4>
        <p>To je odstavek z vsebino.</p>
        <p></p>
        <p>Še en odstavek z vsebino.</p>

        <h4>3. Okviri:</h4>
        <div class="okvir">Element z vsebino</div>
        <div class="okvir"></div>
        <div class="okvir">Še en element z vsebino</div>

        <div class="pojasnilo" style="margin-top: 20px; padding: 15px; background: #fff; border-left: 4px solid #4CAF50;">
            <h4>Kako deluje :empty?</h4>
            <ul>
                <li>Izbere elemente brez vsebine (niti presledkov)</li>
                <li>V tabeli: prikaže opozorilo za manjkajoče podatke</li>
                <li>Pri odstavkih: posebno ozadje in črtkana obroba</li>
                <li>Pri okvirih: vzorec ozadja in zelena obroba</li>
            </ul>
        </div>
    </div>
</body>
</html>

REZULTAT