:not() CSS Pseudo Class

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;

}