Patricia Sauer - Authentic Programming

CSS: The :is() Pseudo Class

thumbnail for the :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
}

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

test

Reference

For full reference see the documentation.


© 2018 - 2022 Patricia Sauer