Fast Reminder That :is() and :the place() Are Principally the Identical With One Key Distinction

I’ve seen a handful of current posts speaking in regards to the utility of the :is() relational pseudo-selector. No have to delve into the small print aside from to say it could possibly assist make compound selectors much more readable.

:is(part, article, apart, nav) :is(h1, h2, h3, h4, h5, h6) {
  coloration: #BADA55;
}

/* ... which might be the equal of: */
part h1, part h2, part h3, part h4, part h5, part h6, 
article h1, article h2, article h3, article h4, article h5, article h6, 
apart h1, apart h2, apart h3, apart h4, apart h5, apart h6, 
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
  coloration: #BADA55;
}

There’s only one catch: the specificity. The selector’s specificity matches essentially the most particular selector within the operate’s arguments. That’s not a giant deal when working with a comparatively flat fashion construction containing principally ingredient and sophistication selectors, however when you toss an ID in there, then that’s the specificity you’re caught with.

/* Specificity: 0 0 1 */
:is(h1, h2, h3, h4, h5, h6) {
  coloration: #BADA55;
}

/* Specificity: 1 0 0 */
:is(h1, h2, h3, h4, h5, h6, #id) {
  coloration: #BADA55;
}

That may be a neat factor! For instance, you would possibly wish to deliberately toss a made-up ID in there to pressure a mode the identical manner you would possibly do with the !necessary key phrase.

What when you don’t need that? Some articles counsel nesting selectors as an alternative which is cool however not fairly with the identical good writing ergonomics.

There’s the place I wish to level to the :the place() selector as an alternative! It’s the very same factor as :is() however with out the specificity baggage. It all the time carries a specificity rating of zero. You would possibly even consider it as a form of specificity reset.

/* Specificity: 0 0 0 */
:the place(h1, h2, h3, h4, h5, h6) {
  coloration: #BADA55;
}

/* Specificity: 0 0 0 */
:the place(h1, h2, h3, h4, h5, h6, #id) {
  coloration: #BADA55;
}

So, is there a sure selector hijacking your :is() specificity? You may want :the place() as an alternative.