What is is()?

Is () is a CSS pseudo-class function that takes a list of selectors as an argument and selects elements that can be selected by any of the selectors in the list. Here’s an example to make it clear:

Before use:

ul li.ol li {}
Copy the code

After use:

:is(ul.ol) li {}
Copy the code

Optimize our code

If our system is complex, is() can help us simplify code, such as the following code:

/* 3-deep (or more) unordered lists use a square */
ol ol ul.ol ul ul.ol menu ul.ol dir ul.ol ol menu.ol ul menu.ol menu menu.ol dir menu.ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul.ul ul ul.ul menu ul.ul dir ul.ul ol menu.ul ul menu.ul menu menu.ul dir menu.ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul.menu ul ul.menu menu ul.menu dir ul.menu ol menu.menu ul menu.menu menu menu.menu dir menu.menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}
Copy the code

Simplify to:

/* 3-deep (or more) unordered lists use a square */
:is(ol.ul.menu, dir) :is(ol.ul.menu, dir) ul.:is(ol.ul.menu, dir) :is(ol.ul.menu, dir) menu.:is(ol.ul.menu, dir) :is(ol.ul.menu, dir) dir {
  list-style-type: square;
}
Copy the code

Avoid CSS errors

If there is an error in our CSS, the entire selector will not take effect. For example, write.content as follows :content. The demo address

<div class="container-1">
  <p class="title">I am Gopal</p>
  <div class="content">I am a crispy rice</div>
</div>

<div class="container-2">
  <p class="title">I am Gopal</p>
  <div class="content">I am a crispy rice</div>
</div>
Copy the code
/* Write wrong, will result in no effect */
.container-1 .title..container-1 :content {
  color: #885c5c;
}
Copy the code

But the.title selector still works if :is() is used, as follows:

/* Content error, title still valid */
.container-2 :is(.title, :content) {
  color: #885c5c;
}
Copy the code

Is () VS CSS preprocessor

Is () is similar to the nested rules in a CSS preprocessor, as follows:

div.p.ul.ol {
  span {
    / *... * /}}/* finally resolves to */
div span.p span.ul span.ol span {
  / *... * /
}
Copy the code

Here is the implementation of is()

:is(div.p.ul.ol) span{}Copy the code

But it’s important to note that their priorities are different.

priority

The element’s priority is matched by :is(), and the calculation with the highest priority in the :is() selector list argument is taken (even if it does not exist).

Understand a bit of mouthful, directly look at a demo address

<ul class="container-3">
  <li class="title">I am Gopal</li>
  <li class="content">I am a crispy rice</li>
</ul>
Copy the code
/* When calculating, fetch.list instead of ul. Its priority is 0, 1, 1 */
:is(ol..list.ul) li {
  color: #885c5c;
}
/* The priority is 0 0 2 */
ul li {
  color: # 000;
}
Copy the code

When :is() is used, its arguments are ol,.list, ul, and the highest.list is calculated, which has a priority of 0, 1, 1. Ul Li’s priority is 0, 0, 2. So the is() selector works, even if the latter is written later. This is different from the preselector, which is overwritten by the latter.

compatibility

: IS () compatibility, IE is still completely dead, but many scenarios can be used now. details

reference

  • :is
  • MDN