Get "PHP 8 in a Nuthshell" (Soon includes PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Make repetitive CSS compact using :is() pseudo-class function

The CSS has many experimental features, that if used cautiously, can be proven very handy in simplifying things.

For instance, the :is() CSS pseudo-class function. What this function does is it takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

So, if you’ve following CSS at hand…

header p:hover,
main p:hover,
footer p:hover {
  color: red;
  cursor: pointer;
}

Here, p:hover is “common” across all three selectors. The :is() function can be used to shorten this to the following.

:is(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

As you can see, it looks more concise and refactorable now.

But as I said, this function is an experimental one. So, not every browser has support for the same. So, to mitigate this you can use fallback functions for the same like *-any() or :matches().

:-webkit-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
:-moz-any(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}
:matches(header, main, footer) p:hover {
  color: red;
  cursor: pointer;
}

Here is the list of all browsers that supports :is() currently.

Data on support for the css-matches-pseudo feature across the major browsers from caniuse.com

Like this article?

Buy me a coffee

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?