DEV Community

Bernard Faria
Bernard Faria

Posted on

The CSS: is () pseudo-class

The CSS: is () pseudo-class function takes a list of selectors 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 way.

Don't do this

.content h1 {
  color: red;
}
.content h2 {
  color: red;
}
.content h3 {
  color: red;
}

header p:hover,
main p:hover,
footer p:hover {
  color: blue;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Do this

.content :is(h1, h2, h3) {
  color: red;
}

:is(header, main, footer) p:hover {
  color: blue;
  cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)