πŸ’‘ This page contain affiliate links. By making a purchase through them, we may earn a commission at no extra cost to you.

Exclude Any Class Name in CSS With This Selector

Ferenc Almasi β€’ 2022 September 12 β€’ Read time 2 min read
  • twitter
  • facebook
CSS

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

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

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:

Copied to clipboard! Playground
/* 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;
}

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:

Copied to clipboard! Playground
/* 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)
  • 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.
  • twitter
  • facebook
CSS
Did you find this page helpful?
πŸ“š More Webtips
Mentoring

Rocket Launch Your Career

Speed up your learning progress with our mentorship program. Join as a mentee to unlock the full potential of Webtips and get a personalized learning experience by experts to master the following frontend technologies:

Courses

Recommended

This site uses cookies We use cookies to understand visitors and create a better experience for you. By clicking on "Accept", you accept its use. To find out more, please see our privacy policy.