Is "is" Useful? | CSS-Tricks

God I’m funny.

Anytime we have fairly repetitive selectors that have a common parent, it’s probably a place we can use the :is() pseudo-selector.

Holger Bartel demonstrates like this:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1 {
  font-size: 20px;
}

Becomes:

:is(section, article, aside, nav)
:is(section, article, aside, nav) h1 {
  font-size: 20px;
}

Adam Argyle demonstrated like this:

#CSS

:is() selector 🎉
the successor to :any() and :matches()

sneak peak into our talk, here's a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y'all!https://t.co/0r2CcUx9Hv pic.twitter.com/wSuGOsDLvZ

— Adam Argyle (@argyleink) November 7, 2019

MDN has an extra dramatic one:

ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu,
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir {
  list-style-type: square;
}

It’s less code and easier to reason.

Kezz Bracey notes that pairing it with :not() can be nice as well:

:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 400;
}

Browser support is just starting to get there and polyfilling is hard, so we aren’t at day-to-day no-brainer use levels quite yet. I’d bet it’s not too far away.

Comments

Noah

# January 3, 2020

Great demonstration, I totally understand :is now! It’s extra weight if you’re using a compiler, but for vanilla CSS this would be a huge bonus to readability

Ramesh

# January 3, 2020

I saw Adam’s tweet back then but couldn’t understand what :is() is doing and even here all those examples aren’t helping much. I am seriously not getting how
:is(section, article, aside, nav) :is(section, article, aside, nav) { font-size: 20px; }
is equivalent to code shown! Can you please explain in detail like you are explaining it to someone hearing this concept for the first time ever. Thanks

John

Permalink to comment# January 3, 2020

Here’s a simplified example:

section section h1, section article h1 { ... } is the same as section *:is(section, article) { ... }

So it’s basically the same as an OR statement. (Also note that I added a * to make the example more clear.)
aror

Permalink to comment# January 4, 2020

Arent you missing h1?

Troy

# January 3, 2020

Learnt something new today. Didn’t even know about this CSS selector. Thanks for the quick and easy to understand examples.

Ian

# January 3, 2020

Personally, I don’t remember needing a selector like :is(), while I have encountered several cases in which a selector like :has() could really come in handy.

Kuba

# January 4, 2020

Assuming the MDN example, how performant is :is() over the series of explicit selectors?

Dalibor Sojic

# January 4, 2020

How about performance? Is “is” slower?

Chris Coyier

Permalink to comment# January 5, 2020

I think this goes into the category of don’t worry about it. CSS selector performance is almost never a big deal (I’ve never optimized for it in, say, 20 years) unless you’re in a very very intense DOM situation (say rendering a million nodes). MDN does have a note how :-moz-any had bad performance in that it was the same as *, which personally I use willy nilly, and that :is aims to fix that “bad” performance.

Grant

# January 4, 2020

The MDN example could be further simplified with an :is(ul, menu, dir)

rzxrzx

# January 4, 2020

:is(item1, item2, .... ) { color: "black" }

basically means match anything within the parentheses, it will match / translate to:

item1 { color: "black"}
item2 { color: "black"}
... { color: "black"}

It’s like inArray() function, for CSS.
Really neat stuff that CSS deserve.

roberto

Permalink to comment# January 6, 2020

.item1,.item2{ color: “black” } what different ? I don’t understand.

tombakerim

# January 5, 2020

Can you please explain in detail like you are explaining it to someone hearing this concept for the first time ever.

Yexan

# January 6, 2020

Thanks Chris for the article.

It reminds me when we use to declare placeholders like :

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

If we grouped all the browser specific selectors in the same rules like

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder { 
  color: pink;
}

It would invalidate the whole block. :D

Nice feature by the way, even if I still prefer to use SASS :)

ol, ul, menu, dir
  ol, ul, menu, dir
    ul, menu, dir
      list-style-type: square

Laurie Jones

# January 9, 2020

Thanks Chris! I thought it was funny that the example from MDN still had the three rules defined and not just this:

:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

But clicking through to the MDN page they explicitly call this out as slow, and advise not to use :is() for the rightmost selector. Something I’ll have to keep in mind, I guess.

This comment thread is closed. If you have important information to share, please contact us.