:not() CSS Pseudo Class

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The :not() pseudo-class in CSS is a powerful selector that allows you to select elements that do not match a specific selector. It negates the selector inside the parentheses, selecting all elements except those that match the given selector. This enables developers to apply styles to a broad range of elements while excluding specific ones.

For example, if you want to apply styles to all paragraphs (<p>) on a webpage except for those with a class of "special", you can use the :not() pseudo-class like this:

p:not(.special) {

    /* styles for paragraphs except those with class "special" */

}

In this case, all <p> elements that do not have the class "special" will receive the specified styles.

It's important to note that the :not() pseudo-class can also be combined with other CSS selectors, allowing for more complex and precise selections in your stylesheets.

Syntax

:not(<complex-selector-list>) {
  /* ... */
}

Example

HTML

<p>I am a paragraph.</p>

<p class="fancy">I am so very fancy!</p>

<div>I am NOT a paragraph.</div>

CSS

.fancy {

  text-shadow: 2px 2px 3px gold;

}



/* <p> elements that are not in the class '.fancy' */

p:not(.fancy) {

  color: green;

}



/* Elements that are not <p> elements */ 

body :not(p) {

  text-decoration: underline;

}



/* Elements that are not <div> and not <span> elements */

body :not(div):not(span) {

  font-weight: bold;

}