CSS :is() and :not() Selector

Photo by Niels Kehl on Unsplash

In this reference, I’m going to discuss two selectors and provide some examples.

:is()

The :is() CSS pseudo-class has become a great way to target elements saving line and line of code and keeping CSS as readable as possible.

Syntax

selector:is(selector) {
 properties;
}

Example:

:is() selector simple example

:matches() was renamed to :is() in csswg3258.

:where() is also similar to :is() the only difference between :where() and :is() is that :where() always has 0 specificity, whereas :is() takes on the specificity of the most specific selector in its arguments.

Specificity

When more than one set of CSS rules apply to the same element, the browser will have to decide which specific set will be applied to the element. The rules the browser follows are collectively called Specificity

If you want to calculate the Specificity of any selector you can check the rules from her Calculating a selector’s specificity.

According to W3C Working Draft.

The specificity of the :is() pseudo-class is replaced by the specificity of its most specific argument. Thus, a selector is written with :is() does not necessarily have equivalent specificity to the equivalent selector written without :is().

Browser Support

You can check from here Can I use it.

:not()

The :not() property in CSS is a negation pseudo-class that represents elements that do not match a list of selectors.

Syntax

selector:not(selector) {
 properties;
}

Example:

:not() selector simple example

The :not() pseudo-class allows useless selectors to be written. For instance :not(*|*), which represents no element at all, or div:not(span), which is equivalent to div but with a higher specificity.

Specificity

According to W3C Working Draft

The specificity of the :not() pseudo-class is replaced by the specificity of the most specific selector in its argument; thus it has the exact behavior of :not(:is(argument)).

Browser Support

You can check from here Can I use it.

Reference

1. W3 :is()
2. W3 :not()
3. MDN web Docs :is()
4. MDN web Docs :not()

Thanks for reading.