is-?is?-useful?

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.

27 comments

  1. Hello, this weekend is nice in support of me, for the reason that this moment
    i am reading this enormous informative post here at my house.

  2. Heya i’m for the first time here. I found this
    board and I in finding It really helpful & it helped
    me out much. I am hoping to present something again and aid others like you helped me.

  3. I am extremely impressed with your writing talents as
    neatly as with the layout on your weblog. Is this a
    paid subject matter or did you customize it your self? Either way stay up the nice quality writing, it’s uncommon to look a nice blog like this one nowadays..

  4. I’ve learn several excellent stuff here. Definitely worth bookmarking for
    revisiting. I wonder how much effort you place to make this
    kind of excellent informative web site.

  5. Fantastic goods from you, man. I have understand your stuff
    previous to and you’re just too great. I really like what you have acquired here,
    really like what you are saying and the way in which you say it.
    You make it entertaining and you still take care
    of to keep it smart. I can’t wait to read much more from you.
    This is really a terrific site.

  6. Having read this I believed it was rather enlightening.
    I appreciate you finding the time and effort to put this short
    article together. I once again find myself spending a significant amount of time both reading and leaving comments.
    But so what, it was still worthwhile!

  7. Ahaa, its fastidious discussion on the topic of
    this post here at this blog, I have read all that,
    so now me also commenting at this place.

  8. It’s awesome to visit this web site and reading the views
    of all mates about this paragraph, while I am also zealous
    of getting know-how.

  9. This article will assist the internet viewers for building up new weblog
    or even a weblog from start to end.

  10. I think the admin of this website is really working hard for his web page, since here every stuff is quality based
    stuff.

  11. I think this is one of the most important information for me.
    And i’m satisfied studying your article. But want to statement on few
    basic things, The site style is ideal, the articles is actually excellent : D.

    Good process, cheers

  12. Excellent beat ! I wish to apprentice while you amend your web site,
    how can i subscribe for a blog site? The account helped me a acceptable deal.
    I had been tiny bit acquainted of this your broadcast offered bright clear idea

  13. That is really fascinating, You’re an overly skilled blogger.

    I’ve joined your feed and sit up for looking for more of your wonderful post.
    Also, I have shared your site in my social networks

  14. Hello there! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
    I’m getting sick and tired of WordPress because I’ve had problems with hackers and I’m looking
    at options for another platform. I would be awesome
    if you could point me in the direction of a good platform.

  15. I know this if off topic but I’m looking into starting my own weblog and was wondering what all is needed
    to get setup? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very web savvy so I’m not 100% sure. Any
    recommendations or advice would be greatly appreciated. Appreciate
    it

  16. Hi, I do think your blog might be having browser compatibility
    problems. When I take a look at your site in Safari, it looks fine however when opening in IE, it
    has some overlapping issues. I just wanted to give you a quick heads up!
    Apart from that, fantastic website!

Leave a Reply

Your email address will not be published.