css :is() pseudo-class

CSS :is() Pseudo-Class

21 Feb, '21css2 mins.

In this series, of exploring CSS functionality from the (hopefully, very near) future, I look at the :is() pseudo-class.

 

View :is() Demo

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

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

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.

© 2021Prince Bazawule