duncanlock.net

The CSS :is selector is pretty neat

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) {
  /* ... */
}

References


Related Posts


Comments