CSS :not() Selector

Posted in CSS Tutorial

Updated on Oct 27, 2024

By Mari Selvan

👁️ 16 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :not() selector in CSS is a powerful pseudo-class that allows you to select elements that do not match a certain condition.

It acts as a negation filter, making it easier to exclude specific elements from being styled while still targeting others.

This selector can be combined with various other selectors to give more precise control over styling.

💡 Syntax

The signature of the :not Selector is as follows:

Syntax

Copied

:not(selector) {
    /* CSS properties */
}

The :not() selector accepts any valid CSS selector inside the parentheses.
It can be used to exclude elements from being selected, based on the conditions you specify.

📝 Example

Here is an example demonstrating how to use the :not() selector in CSS:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :not() Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <ul>
        <li class="active">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li class="active">Item 4</li>
        <li>Item 5</li>
    </ul>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style all list items except those with class "active" */
li:not(.active) {
    background-color: lightgray;
    color: black;
    padding: 10px;
}

/* Style for active list items */
.active {
    background-color: green;
    color: white;
}

In this example:

The :not(.active) selector is used to style all <li> elements that do not have the class active.
All non-active list items are given a light gray background, while the active ones are styled with a green background and white text.

💬 Usage Tips

You can use :not() with any CSS selector, including class selectors, attribute selectors, and even pseudo-classes.
It’s useful when you need to apply styles broadly but want to exclude certain elements, like excluding a specific class or tag from a rule.

Multiple Selectors in :not()

You can also combine multiple conditions in :not() by chaining them together, as :not() only supports one condition at a time:

CSS

Copied

/* Select all input elements except those of type 'submit' and 'reset' */
input:not([type="submit"]):not([type="reset"]) {
    border: 2px solid blue;
}

⚠️ Common Pitfalls

Performance impact: Overusing :not() with complex selectors can make CSS slower to process, especially in large documents. Use it carefully to avoid performance issues.
Invalid combinations: The :not() selector only accepts one selector inside it. If you need to exclude multiple conditions, you must chain them (e.g., :not(.class1):not(.class2)).
Browser support: While :not() is widely supported across modern browsers, earlier versions of Internet Explorer (IE8 and below) may not support it.

🎉 Conclusion

The CSS :not() selector is a versatile tool that helps you fine-tune your styling by excluding certain elements from selection. It’s especially handy when working with dynamic content or needing to create exceptions for specific classes or IDs. By using :not(), you gain more precision and control over your styles, making it an essential part of any CSS toolkit.