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).

Leave a Comment

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close