CSS :is() Pseudo-Class
In this series, of exploring CSS functionality from the (hopefully, very near) future, I look at the :is() pseudo-class.
Concept
The :is() pseudo-class takes a selector list as its argument, then selects any element that can be selected by one of the selectors in that list. It can be seen as being similar to rules nesting in css preprocessors. This comes in handy for writing large selectors in a more compact for; as seen below:
Although still a work in progress, it can be seen as replacing :matches(), which in turn replaced the older, vendor-prefixed pseudo-class :any().
Syntax
In the above snippet, main‘s h1 is ignored as it falls outside the :is conditions
About Specificity…
Specificity of :is() gets auto-upgraded to the most specific item in the list of arguments provided, as shown below,
Demo
Browser Support
It is clear that, once finalised, :is() will present a more concise and efficient way of writing CSS selectors. I am definitely looking forward to this.