DEV Community

Brandon Weaver
Brandon Weaver

Posted on

1 2

: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

Top comments (1)

Collapse
 
arvindsridharan profile image

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

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more