:is()

#css

I've been trying to improve my understanding of CSS recently and discovered the :is() function. :is() allows you to apply styles to nested elements without the need to specify each element individually.

In the example above, I use the function to group styling which I want to apply to both the red and blue nested paragraph elements.

In this example, you could get the same result with the following selector, however, when you have deeply nested, :is() helps to prevent the need for repetitive selectors.

.red p,
.blue p {
  font-size: 30px;
  background-color: #9b9b9b;
  border-radius: 10px;
}

/* same as above */
:is(.red, .blue) p {
  font-size: 30px;
  background-color: #9b9b9b;
  border-radius: 10px;
}