DEV Community

Brandon Weaver
Brandon Weaver

Posted on

:is()

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;
}
Enter fullscreen mode Exit fullscreen mode

Latest comments (1)

Collapse
 
arvindsridharan profile image
arvindsridharan • Edited

Dear Brandon. It's the same way as using This keyword in javascript. It's more like a pronoun.