Pseudo-razred :not

Pseudo-razred :not je močno orodje, ki nam omogoča, da izberemo vse elemente razen tistih, ki ustrezajo podanemu selektorju.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Psevdo-razred :not</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .primer {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }
        /* Osnovni stil za vse odstavke */
        .primer p {
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            color: #3fb950!important;
        }
        /* Uporaba :not za vse odstavke razen tistih s posebnim razredom */
        .primer p:not(.posebni) {
            background-color: #e2e8f0;
            border-left: 4px solid #4299e1;
            color: #fe5849!important;
        }
        /* Stil za gumbe */
        button:not(.primary) {
            background-color: #edf2f7;
            border: 1px solid #cbd5e0;
            color: #4a5568!important;
        }
        button {
            padding: 8px 16px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            color: #4CAF50!important;
        }
        button.primary {
            background-color: #4299e1;
            color: white!important;
            border: none;
        }
        /* Stil za seznam */
        li:not(:last-child) {
            border-bottom: 1px solid #cbd5e0;
        }
    </style>
</head>
<body>
    <h1>Psevdo-razred :not</h1>
    
    <div class="primer">
        <h3>Primer z odstavki</h3>
        <p>Ta odstavek bo obarvan rdeče, ker nima posebnega razreda.</p>
        <p class="posebni">Ta odstavek bo obarvan zeleno, ker ima razred "posebni".</p>
        <p>Še en rdeče obarvan odstavek brez posebnega razreda.</p>

        <h3>Primer z gumbi</h3>
        <div>
            <button class="primary">Primarni gumb</button>
            <button>Navaden gumb 1</button>
            <button>Navaden gumb 2</button>
        </div>

        <h3>Primer s seznamom</h3>
        <ul style="list-style: none; padding: 0;">
            <li style="padding: 10px;">Prvi element</li>
            <li style="padding: 10px;">Drugi element</li>
            <li style="padding: 10px;">Tretji element</li>
            <li style="padding: 10px;">Zadnji element</li>
        </ul>
    </div>
</body>
</html>

REZULTAT