How to select elements not equal to a selector with CSS?

Spread the love

Sometimes, we want to select elements not equal to a selector with CSS.

In this article, we’ll look at how to select elements not equal to a selector with CSS.

How to select elements not equal to a selector with CSS?

To select elements not equal to a selector with CSS, we use the :not selector.

For instance, we write

<input type="text" value="will be matched" />
<input type="text" value="will not be matched" class="avoidme" />
<input type="text" value="will be matched" />

to add some input elements.

Then we select the inputs that don’t have the avoidme class and apply background color to them by writing

input:not(.avoidme) {
  background-color: green;
}

Conclusion

To select elements not equal to a selector with CSS, we use the :not selector.

Leave a Reply

Your email address will not be published. Required fields are marked *