CSS :is() Functional Pseudo Class Selector Examples

The :matches() pseudo-class selector is the same as the :is() pseudo-class selector. Actually, :matches() has been renamed as :is().

The :is() pseudo-class function takes a list of selectors as its parameter, and picks any element matching at least one of those selectors. This is useful for writing large selectors in a more compact form.

In the past, the only way to apply multiple elements with the same styles was to write out the rule over and over again for each of the element.

For example, if you style a span.bold-text tag inside p, div, h2, h3, then you need to write style for p > span.bold-text, div > span.bold-text, h2 > span.bold-text, h3 > span.bold-text. Each pair is separated by comma like that.

p > span.bold-text, 
div.title > span.bold-text, 
h2 > span.bold-text, 
h3 > span.bold-text{
  font-weight: bold;
  color: black;
 }

It works well but we always want to code it better.

:is()

The above styles can be converted to :is as following:

:is(p, div.title, h2, h3) > span.bold-text{
    font-weight: bold;
    color: black;
}

Another example is to use :is() for multiple states of an element. In the example below, we style a link if it is hovered over or has active class.

a:is(.active, :hover){
    color: red;
   texr-decoration: underline;
}

Deep Selection with :is()

This selector shows its capability via nested selectors. Readability gets better. You also make the CSS smaller.

.item-wrapper:is(.group, .wrapper, :is(.card)) {
    border:  1px solid red;
}

A complicated multi selections of ol .menu li a, ul .menu li a, ol .nav .item a, etc. can be converted to :is as below:

:is(ol, ul) :is(.menu, .nav) :is(li, .item) a {
    color: blue;
}

Browser Compability

The :is() selector is supported in browsers such as Chrome (>=88), Firefox (>= 78) and Safari (>=14).