Exclude Any Class Name in CSS With This Selector

Ferenc Almasi • 2022 September 12 • 📖 2 min read

To exclude a class in CSS, we can use the :not pseudo-class selector, also known as the not selector.

:not(.class) {
    background: red;
}
Copied to clipboard!

This can be used to style any element that is not matched by the selector written in parentheses. It accepts any valid CSS selector, and can also be chained off from other elements. For example:

/* Select all p tags that doesn't have the class "highlighted" */
p:not(.highlighted) {
    ...
}

/* Select every p, but not the last */
p:not(:last-child) {
    background: red;
}
Copied to clipboard!

First paragraph

Second paragraph

Last paragraph with a :not(:last-child) selector

As you can see, the selector can be used with other than class selectors. There are also a couple of rare cases you should keep in mind whenever you use the :not selector. These are the following:

/* Using the :not selector with a wildcard selector */
:not(*)

/* Globally using the :not selector */
:not(.class)

/* Using :not with an invalid selector */
:not(:unsupported-pseudo-class)
Copied to clipboard!
  • In the first example, we used :not with the * wildcard selector. This is a useless selector that will not be applied to anything, since the selector reads: "select any element that is not an element".
  • When you globally use the :not selector (not attached to any element), it will also include html and body. More importantly, it will also increase specificity, so #id:not(.class) will be stronger than #id.
  • Lastly, if you use an unsupported or invalid selector with :not, the entire rule will be invalidated, meaning no styles will be applied to the element.
Share on
  • twitter
  • facebook
JavaScript Course Dashboard

Tired of looking for tutorials?

You are not alone. Webtips has more than 400 tutorials which would take roughly 75 hours to read.

Check out our interactive course to master JavaScript in less time.

Learn More

Recommended