Pseudo-razred :only-child

Pseudo-razred :only-child izbere element samo takrat, ko je ta element edini otrok svojega starševskega elementa. To je uporabno, ko želimo posebej oblikovati elemente, ki nimajo bratskih elementov.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
<style>
    /* Oblikovanje edinega otroka */
    p:only-child {
        background: #2196f3;
        color: #0f172a!important;
        padding: 15px;
        margin: 10px;
        border-radius: 5px;
    }
    
    /* Oblikovanje span elementa, ki je edini otrok */
    span:only-child {
        background: #ff5722;
        color: #495057!important;
        padding: 5px 10px;
        margin: 5px;
        display: inline-block;
        border-radius: 3px;
    }
    
    /* Primer, ko element ni edini otrok */
    .vec-otrok p {
        background: #e0e0e0;
        color: #388e3c!important;
        padding: 10px;
        margin: 5px;
    }
</style>
</head>
<body>
    <h3>Primer z enim otrokom:</h3>
    <div>
        <p>Ta odstavek je edini otrok in bo obarvan modro.</p>
    </div>
    
    <h3>Primer z več otroci:</h3>
    <div class="vec-otrok">
        <p>Prvi odstavek (ne bo posebej oblikovan)</p>
        <p>Drugi odstavek (ne bo posebej oblikovan)</p>
    </div>
    
    <h3>Primer s span elementom:</h3>
    <p>
        <span>Ta span je edini otrok in bo obarvan oranžno</span>
    </p>
    
    <h3>Primerjava:</h3>
    <div>
        <p>Ta odstavek je edini otrok (modro)</p>
    </div>
    <div>
        <p>Prvi odstavek</p>
        <p>Drugi odstavek</p>
        <p>Ti odstavki niso edini otroci</p>
    </div>
</body>
</html>

REZULTAT