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:
: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.
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
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
Here’s a simplified example:
section section h1, section article h1 { ... }is the same assection *: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.)Arent you missing h1?
Learnt something new today. Didn’t even know about this CSS selector. Thanks for the quick and easy to understand examples.
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.Assuming the MDN example, how performant is
:is()over the series of explicit selectors?How about performance? Is “is” slower?
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-anyhad bad performance in that it was the same as*, which personally I use willy nilly, and that:isaims to fix that “bad” performance.The MDN example could be further simplified with an :is(ul, menu, dir)
basically means match anything within the parentheses, it will match / translate to:
It’s like
inArray()function, for CSS.Really neat stuff that CSS deserve.
.item1,.item2{ color: “black” } what different ? I don’t understand.
Can you please explain in detail like you are explaining it to someone hearing this concept for the first time ever.
Thanks Chris for the article.
It reminds me when we use to declare placeholders like :
If we grouped all the browser specific selectors in the same rules like
It would invalidate the whole block. :D
Nice feature by the way, even if I still prefer to use SASS :)
Thanks Chris! I thought it was funny that the example from MDN still had the three rules defined and not just this:
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.