Learn the :is pseudo-class in under a minute

Consider the following CSS:

css
Copy
1article h1, 
2section h1,
3main h1 {
4  color: black;
5}

The :is pseudo-class can simplify this CSS like so:

css
Copy
1:is(article, section, main) h1 {
2  color: black;
3}

If you’re scoping a style, the :is pseudo-class will save you a ton of time writing your CSS.

You will save even more time if you’re scoping two or three levels deep:

css
Copy
1article article h1, article section h1, article main h1, 
2section article h1, section section h1, section main h1, 
3main article h1, main section h1, main main h1 {
4  color: black;
5}

Becomes:

css
Copy
1:is(article, section, main) :is(article, section, main) h1 {
2  color: black;
3}

Imagine going three levels deep.

The catch? It’s not well supported. Yet.

The :is used to be :matches which used to be :any. Yeah. I know. Confusing.

So, to be safe you need to do the following:

css
Copy
1:-webkit-any(article, section, main) h1 {
2  color: black;
3}
4:-moz-any(article, section, main) h1 {color: black;
5}
6:matches(article, section, main) h1 {
7  color: black;
8}
9:is(article, section, main) h1 {
10  color: black;
11}

Okay, so should you use :is yet? You have two options.

Option #1: Show browsers that you’re using these new CSS features and for now include this backwards-compatible CSS.

Option #2: Wait until there’s more browser support.

Here’s the catch though. If no one is using the CSS :is pseudo-class then no browsers will add support for it.

So, I recommend option 1.