Selector - Logical Not Pseudo-Class

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>

• The css that color all descendants elements of the body without a class attribute

body *:not([class]) { color: skyBlue };

• Result

Not and Not

input:not([type="radio"]):not([type="checkbox"])