How To Except In Css

by

In this blog post, we will discuss how to use the :not() selector in CSS. This powerful selector allows you to target all elements except the ones specified in its argument. By using the :not() selector, you can easily style elements without having to manually exclude certain elements with multiple selectors or additional classes.

Basic Syntax of the :not() Selector

The basic syntax of the :not() selector is as follows:

        element:not(argument) {
            property: value;
        }

Here, the element is the HTML element you want to target, and the argument is the element you want to exclude from the targeting. You can then apply the desired CSS properties and values to the targeted elements.

Using the :not() Selector in a Real-World Example

Suppose we have the following HTML structure:

        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li class="highlight">Item 3</li>
            <li>Item 4</li>
        </ul>

We want to apply a specific style to all the list items except the one with the class .highlight. We can use the :not() selector as follows:

        li:not(.highlight) {
            color: blue;
        }

This CSS rule will apply the color blue to all the list items except the one with the class .highlight.

Using the :not() Selector with Multiple Arguments

It’s also possible to exclude multiple elements using the :not() selector. To do this, simply include a comma-separated list of arguments within the parentheses. For example, suppose we have the following HTML structure:

        <ul>
            <li>Item 1</li>
            <li class="highlight">Item 2</li>
            <li class="exclude">Item 3</li>
            <li>Item 4</li>
        </ul>

To exclude both the .highlight and .exclude classes, we can use the following CSS rule:

        li:not(.highlight, .exclude) {
            color: blue;
        }

This rule will apply the color blue to all the list items except the ones with the classes .highlight or .exclude.

Conclusion

The :not() selector in CSS is a powerful and useful tool for targeting elements while excluding specific ones. By understanding its syntax and usage, you can greatly simplify your CSS code and make it easier to maintain. Be sure to experiment and practice with the :not() selector to enhance your CSS skills and create more dynamic styles in your web projects.