:not and :is

Learn :not and :is pseudo-classes.

What is :not()?

The :not() pseudo-class matches elements that do not fit the selector inside the parentheses. It is an exclusion filter.

For example, li:not(.active) selects all list items whose class is not active. You can dim only the inactive items and leave the active one as is.

Inside, you write a single selector; a comma list is not allowed.

Grouping selectors with :is()

The :is() pseudo-class matches any element that fits one of the selectors inside the parentheses. It takes a comma-separated list.

For example, :is(h1, h2, h3) { font-family: Georgia, serif; } forces all three heading levels into the same family with one declaration. It is shorter than h1, h2, h3 and works nested.

It is supported in all modern browsers.

:is() shorthand and specificity

:is() shortens repeated writing. Instead of section h1, section h2, section h3, you write section :is(h1, h2, h3); the meaning is the same.

One detail: the specificity of :is() equals the strongest selector inside the parentheses. :where() always has zero specificity, which makes it easy to override.

Exercise Dim the list items that are not featured

Write a li:not(.featured) selector and add color: #888 inside it. This dims only the list items whose class is not featured; the featured ones keep their look.

Show example solution

/* dim the non-featured items */
li:not(.featured) {
  color: #888;
}

Test yourself

What does li:not(.active) match?
```
li:not(.active) {
  color: #888;
}
```
- All list items without the active class
- Only the items with the active class
- Nothing, it is an invalid pseudo-class
- The first item of the list
Show answer

All list items without the active class — Correct. :not(.active) grabs items without the active class.

Write the pseudo-class that groups three heading levels

____ {
  font-family: Georgia, serif;
}

Show answer

:is(h1, h2, h3) {
  font-family: Georgia, serif;
}

Match each pseudo-class to its purpose

:not(.x)

Without class x
:is(h1, h2)

h1 or h2
:hover

Pointer over it
:nth-child(2)

Second sibling

Next lesson: :first-child and :last-child

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies