Selector - Logical Not Pseudo-Class

Chrome Devtool Selector

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





Discover More
Chrome Devtool Selector
How to select elements based on attribute ? (with the css selector API)

This page is selector expressions that select elements based on attribute. An ID selector and a class selector (ie selects element with ID “IdName” and the class “className”) The HTML...
Chrome Devtool Selector
Selector - Logical Not Pseudo-Class

not is a logical pseudo-class that negates its expression. Its selects elements that are not represented by its arguments. Example of a selector when the element has the class fade but not the class...
Chrome Devtool Selector
Selector - Logical Pseudo-Class

Logical Pseudo-class are: :matches :not :has :is that return a boolean value (ie logical). They are predicate expression. Example of a selector when the element has the class fade but not...



Share this page:
Follow us:
Task Runner