O'Reilly logo

CSS Pocket Reference, 4th Edition by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Name

:not(e)

Applies to:

Any element

Description:

Matches every element that is not described by the simple selector e. This allows authors to select, say, every element that is not a paragraph by stating *:not(p). More usefully, negation can be used within the context of descendant selectors. An example of this would be selecting every element within a table that was not a data cell using table *:not(td). Another example would be selecting every element with an ID that was not “search” by using [id]:not([id="search"]).

Note that there is one exception to the “simple selector” definition of e: it cannot be a negation pseudo-class. That is, it is impermissible to write :not(:not(div)). This is no great loss, since the equivalent of that would be div.

Because :not() is a pseudo-class, it can be chained with other pseudo-classes as well as with instances of itself. For example, to select any focused element that isn’t an a element, use *:focus:not(a). To select any element that isn’t either a paragraph or a div, use *:not(p):not(div).

As of mid-2011, the “simple selector” restriction means that grouped and descendant selectors are not permitted within :not() expressions. This restriction is likely to be loosened or eliminated in future versions of the CSS Selectors module.

Examples:

ul *:not(li) {text-indent: 2em;}
fieldset *:not([type="checkbox"]):not([type="radio"]) 
   {margin: 0 1em;}

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required