Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:not(s)

[CSS Selector] E:not(s)

Using 'selector:not(selector)', you can apply styles to elements that do not match a specific element, or elements that do not have a specific attribute or value. Does not work in IE8 and below.

To use ':not()', simply write the selector you want to negate inside the parentheses '()'. To exclude a specific selector from all elements, write '*:not(selector)' — the '*' can be omitted, so ':not(selector)' works just as well. Attribute selectors can also be used inside '()'. Note, however, that only simple selectors are allowed — selectors that target descendant or sibling elements using ' ', '>', '+', etc. cannot be used inside the parentheses.

':not()' can be chained consecutively, allowing multiple conditions such as ':not(selector1):not(selector2)'.

Note that a known bug exists in some browsers where the style is not applied when ':not()' (or '*:not()') is used to target all elements.

Sample Code

p:not(.hoge) { color: blue;} /* Makes p elements without the class name 'hoge' blue. */
p:not([class]) { font-size: 20px;} /* Sets font-size to 20px on p elements without a 'class' attribute. */
div:not([class]):not([id]) { background-color: yellow;} /* Sets yellow background on div elements that have neither a class name nor an id name. */
div:not(p span) { background-color: blue;} /* Only simple selectors are allowed inside '()' so this rule is not applied. */

Browser Display Result

p:not(.hoge) { color: blue;} /* Makes p elements without the class name 'hoge' blue. */
p:not([class]) { font-size: 20px;} /* Sets font-size to 20px on p elements without a 'class' attribute. */
div:not([class]):not([id]) { background-color: yellow;} /* Sets yellow background on div elements that have neither a class name nor an id name. */
div:not(p span) { background-color: blue;} /* Only simple selectors are allowed inside '()' so this rule is not applied. */

<p>This is a p element.</p>
<p class="hoge">This is a p element. The class name is set to 'hoge'.</p>
<div>This is a div element.</div>
<div class="miku">This is a div element. The class name is set to 'miku'.</div>
<div id="miku">This is a div element. The id name is set to 'miku'.</div>