:not CSS Pseudo Class

Description

The :not pseudo-class sets style rules for elements that do not contain the specified selector, it is known as the negation pseudo-class.

Syntax

element:not(<selector>) { ... }

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;

}