CSS :not Selector - Negation Selector
What is CSS :not Selector?
CSS :not selector matches all element whose are exclude to apply CSS.
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.
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.
<!DOCTYPE html>
<html>
<head>
<title>CSS :not Selector</title>
<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>
</html>
Example
In this example select all <button> exclude whose attribute disabled.
<!DOCTYPE html>
<html>
<head>
<title>CSS :not Selector</title>
<style type="text/css">
button:not([DISABLED]){
color:#ff0000;
}
</style>
</head>
<body>
<button disabled="disabled">Hello</button>
<button>Hello</button>
</body>
</html>
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.