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:
/* 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
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.