The negation pseudo-class

Introduction

The negation pseudo-class selector allows authors to target every element that doesn’t match the defined selector.

The negation pseudo-class (CSS3)

The :not() pseudo-class selector is written using an element, followed by ":not", followed by a "(", followed by "s", followed by a ")".

The (s) defines a simple selector. Simple selectors include types, classes, IDs, pseudo-classes and attribute selectors.

/* syntax */
E:not(s) { }

/* examples */
div:not(.intro) { }

Whitespace is not permitted within the selector.

/* Valid */
div:not(.intro) { }

/* Invalid */
div: not (.intro) { }

Only simple selectors are allowed inside the brackets.

/* type selector */
body :not(p) { }
/* class selector */
p:not(.intro) { }
/* id selector */
p:not(#nav) { }
/* pseudo-class selector */
p:not(:lang(fr)) { }
/* attribute selector */
p:not([class="intro"]) { }

The negation selector, multiple simple selectors and pseudo-elements are not allowed inside the brackets.

/* negation selector */
:not(:not) { }
/* multiple simple selectors */
:not(p, .intro) { }
/* pseudo-elements */
:not(::first-line) { }

How does it work?

The :not pseudo-class selector targets all elements except those defined by the selector.

In the following example, every element that is not a <p> element will be selected.

/* CSS selector */
body :not(p) { }

<!-- HTML markup -->
<p></p>
<div></div>
<form>
  <label></label>
  <input>
</form>

In the following example, every <p> element that does not have a class of intro will be selected.

/* CSS selector */
p:not(.intro) { }

<!-- HTML markup -->
<p class="intro"></p>
<p></p>
<p></p>

In the following example, every <p> element that does not have an ID of news will be selected.

/* CSS selector */
p:not(#news) { }

<!-- HTML markup -->
<p id="news"></p>
<p></p>
<p class="news"></p>

In the following example, every <p> element that does not have a lang value of fr will be selected.

/* CSS selector */
p:not(:lang(fr)) { }

<!-- HTML markup -->
<p lang="fr"></p>
<p></p>
<p lang="br"></p>
<div></div>

In the following example, every <input> element that does not have an attribute of disabled will be selected.

/* CSS selector */
input:not([disabled] { }

<!-- HTML markup -->
<input type="text" disabled>
<input type="text">

Specifications

W3C Selectors Level 4
Status: Working Draft

Selectors Level 3
Status: Recommendation

Support

The :not pseudo-class selector is not supported in IE6, IE7 or IE8.

Exercise 1: Write a :not selector

Open this HTML file in an editor:
exercises-start/exercise-205-06-01.html

Write a CSS rule to style any <p> element that does not have a class of intro. Set the color to royalblue.

/* Add styles here */
p:not(.intro) {
  color: royalblue;
}

Check your work against the finished HTML file:
exercises-finished/exercise-205-06-01.html