Modern CSS Pseudo Classes

1. :is()

Used to group multiple selectors cleanly.

Without :is()

section h1,
section h2,
section h3{
  color:red;
}

With :is()

section :is(h1,h2,h3){
  color:red;
}

Much cleaner.

2. :where()

Looks similar to :is()

BUT…

Specificity becomes:

ZERO (0)

Example

:where(h1,h2,h3){
  margin:0;
}

3. :not()

Select everything EXCEPT something.

Example

button:not(.primary){
  background:gray;
}

Meaning:

Select all buttons
EXCEPT .primary