:not() CSS Pseudo Class


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.


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


<p>I am a paragraph.</p>
<p class="fancy">I am so very fancy!</p>
<div>I am NOT a paragraph.</div>
.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;

Browser Support

The following table will show you the current browser support for the CSS :not() pseudo class.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 1st October 2023