The CSS :is() Pseudo Class

When coding The High Five Network, I got to know the :is() pseudo class. Of course, I directly used it almost everywhere. At some places it did not make sense, though. As I now know how to use the :is() pseudo class properly, I want to explain how to use it.

Usual way of styling elements

When specifying the same styling for multiple elements, let's say the styling of paragraphs within the divs div1 and div2, you can write it like this:

#div1 p {
  // Add your styling here
}

#div2 p {
  // Add your styling here (the same styling as above in this case)
}

or a bit shorter by defining the styling only once:

#div1 p, #div2 p {
  // Add your styling here
}

In both cases you need to specify the p after the div IDs.

Applying the same styles to multiple elements using the :is() Pseudo Class

Using the is() pseudo class, you can shorten your CSS:

:is(#div1, #div2) p {
  // Add your styling here
}

The p needs to be specified only once, now.

This method can also be specified when styling elements for, e.g. hovering. Instead of writing

#div1 p:hover, #div2 p:hover {
  // Add your styling here
}

you can write

:is(#div1, #div2) p:hover {
  // Add your styling here
}

which is shorter and easier to read.

In case that you want to style the hovering for the elements contained in the :is(), you can also do it like this:

:is(#div1, #div2):hover {
  // Add your styling here
}

Reference

For full reference see the documentation.

Watch it on YouTube

You can watch me explaining the :is() pseudo class in this video: