CSS :not(selector)

The CSS :not(selector) pseudo-class matches elements that do not match a specified selector. It is useful for excluding specific elements from a group of selectors, allowing you to target all elements except those matching a condition.

The syntax for the :not pseudo-class is:

</>
Copy
selector:not(condition) {
    property: value;
}

Where:

ParameterDescription
selectorThe element(s) to which the :not pseudo-class will apply.
conditionThe condition to exclude from the styling.
propertyThe CSS property to style the matching elements.
valueThe value assigned to the CSS property.

Examples

1. Styling All Paragraphs Except One with a Class

In this example, all <p> elements are styled with a blue text color, except the one with the class .exclude.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        p:not(.exclude) {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This paragraph will be blue.</p>
    <p class="exclude">This paragraph is excluded.</p>
    <p>This paragraph will also be blue.</p>
</body>
</html>

2. Styling List Items Except the Last One

Here, all <li> elements are styled with a bold font, except the last one.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        li:not(:last-child) {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Last item (not bold)</li>
    </ul>
</body>
</html>

3. Styling All Inputs Except Type=”Submit”

In this example, all <input> elements are styled with a green border, except those with type="submit".

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        input:not([type="submit"]) {
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="Text input">
        <input type="password" placeholder="Password input">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

4. Styling All Divs Except Those with a Specific ID

Here, all <div> elements are styled with a lightgray background, except the one with the ID #no-style.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div:not(#no-style) {
            background-color: lightgray;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div>This div is styled.</div>
    <div id="no-style">This div is not styled.</div>
</body>
</html>

5. Styling All Links Except Those with Specific Classes

In this example, all <a> elements are styled with green text, except those with the class .external.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        a:not(.external) {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">Internal Link 1</a>
    <a href="#">Internal Link 2</a>
    <a href="#" class="external">External Link 1</a>
    <a href="#" class="external">External Link 2</a>
</body>
</html>