CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS pseudo :not Selector - negation Selector


What is :not Selector?

CSS :not selector matches all element whose are exclude to apply CSS.
:not selector argument possible value element name, class name, id name, or attributes value surrounding by opening and closing square brackets.
This selector identify by : (colon sign) with not keyword.

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 1+
  • Internet Explorer 9+
  • Opera 9.5+
  • Safari 3.2+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.

Syntax

This syntax apply to matches all <p> element and exclude whose have :not selector.

p:not(selector) {
	property: value;
	property: value;
	...
}

Example:

Select all <p> element exclude whose class name="one" to apply css.

<style type="text/css">
p:not(.one){
color:#ff0000;
}
</style>
</head>
<body>
    <p>This is not selector example.</p>
    <p class="one">This is another paragraph.</p>
</body>

Run it...   »

Example Result:

Example:

In this example select all <button> exclude whose attribute disabled.

<style type="text/css">
button:not([DISABLED]) {
   color:#ff0000;
}
</style>
</head>
<body>

    <button disabled="disabled">Hello</button>
    <button>Hello</button>

</body>

Run it...   »

Example Result: