: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