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"])

Powered by ComboStrap