I found out about the CSS :is selector today, via this “Things I Learned Reading Webkit’s UA Stylesheet” article.
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:
/* Instead of this: */
.content p > code,
.content td > code,
.content li > code {
/* ... */
}
/* You can do this: */
.content :is(p, td, li) > code {
/* ... */
}you can also put it in the middle of selectors, like this:
/* Instead of this: */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content hr {
/* ... */
}
/* You can do this: */
.content :is(h1, h2, h3, h4, h5, hr) {
/* ... */
}