CSS :is() Pseudo-Class

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

css :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:

 

/* This block...: */
header h1, header h2, header h3, header h4, header h5, header h6, 
main h1, main h2, main h3, main h4, main h5, main h6, 
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
  color: #EEEEEE;
}

/* ...Is same as this */
:is(header, main, footer) :is(h1, h2, h3, h4, h5, h6) {
  color: #EEEEEE;
}

 

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

:is(header, footer) :is(h1) {
    display: inline-block;
    background: #eee;
    padding: 0.25rem;
}

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,

/* This takes precedence... */ 
:is(ol, .fruit, ul) li { /* ... */ }

/* ... over this, although this is lower down the cascade */ 
ol li { /* ... */ }

 

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.