Pseudo-class :not

The :not pseudo-class is a powerful tool that allows us to select all elements except those that match a given selector.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pseudo-class :not</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .example {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin: 20px 0;
        }
        /* Basic style for all paragraphs */
        .example p {
            padding: 15px;
            margin: 10px 0;
            border-radius: 4px;
            color: #3fb950!important;
        }
        /* Using :not for all paragraphs except those with special class */
        .example p:not(.special) {
            background-color: #e2e8f0;
            border-left: 4px solid #4299e1;
            color: #fe5849!important;
        }
        /* Style for buttons */
        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;
        }
        /* Style for list */
        li:not(:last-child) {
            border-bottom: 1px solid #cbd5e0;
        }
    </style>
</head>
<body>
    <h1>Pseudo-class :not</h1>
    
    <div class="example">
        <h3>Example with paragraphs</h3>
        <p>This paragraph will be colored because it has no special class.</p>
        <p class="special">This paragraph won't be colored because it has the "special" class.</p>
        <p>Another colored paragraph without a special class.</p>

        <h3>Example with buttons</h3>
        <div>
            <button class="primary">Primary button</button>
            <button>Regular button 1</button>
            <button>Regular button 2</button>
        </div>

        <h3>Example with a list</h3>
        <ul style="list-style: none; padding: 0;">
            <li style="padding: 10px;">First item</li>
            <li style="padding: 10px;">Second item</li>
            <li style="padding: 10px;">Third item</li>
            <li style="padding: 10px;">Last item</li>
        </ul>
    </div>
</body>
</html>

RESULT