About
not is a logical pseudo-class that negates its expression.
Its selects elements that are not represented by its arguments.
Example
Has the class but not the class
Example of a selector when the element has the class fade but not the class show, the opacity will be 0
- Css
.fade:not(.show) {
opacity: 0;
}
- Html
<p class="fade show">Fade and Show</p>
<p class="fade">Fade without Show</p>
- Output:
Have not an attribute
The not pseudo-class can be used in attribute selection expression
Example: all E element that does not have the foo attribute.
E:not([foo])
Example: Colors element without a class attribute
- The HTML
<p class="foo">A paragraph with only the class attribute</p>
<div id="foo">A div with only the id attribute</div>
body *:not([class]) { color: skyBlue };
- Result
Not and Not
input:not([type="radio"]):not([type="checkbox"])