The paper

:is() was originally :match(), but after CSSWG issue #3258 :matches() was renamed :is(). The :is() pseudo-class function can greatly simplify the complexity of the compound selector and reduce the risk of writing selector errors.

Basic usage

The :is() pseudoclass function takes a list of selectors and selects elements that can be selected by any of the selectors in that list. Such as:

ul li.ol li  {}
Copy the code

Can be simplified as

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

To make the comparison more intuitive, let’s continue with a more complicated example:

:is(section.article.aside.nav) :is(h1.h2.h3.h4.h5.h6)  {
    color: red;  
}
Copy the code

Is equivalent to

section h1.section h2.section h3.section h4.section h5.section h6.article h1.article h2.article h3.article h4.article h5.article h6.aside h1.aside h2.aside h3.aside h4.aside h5.aside h6.nav h1.nav h2.nav h3.nav h4.nav h5.nav h6  {  
    color: red;  
}
Copy the code

The :is() pseudo-class function greatly reduces the number of characters in the selector list, simplifies the complexity of the selector list, and reduces the probability of writing the selector list error.

Cross-browser compatibility

Based on the earlier :-webkit-any() and :matches() pseudo-class function compatibility support, :is() pseudo-class function compatibility coverage across browsers is high. Here are the browser compatibility statistics provided by Caniuse for reference.

Detailed data can be viewed here

Many browsers support this feature through an older, prefixed pseudo-class :any(), including older versions of Chrome, Firefox, and Safari. This works in exactly the same way as :is(), except that it requires a vendor prefix and does not support complex selectors.

CSS compatibility

/* Backward compatible versions :-*-any()*/
:-webkit-any(section, article, aside, nav) h1{
    color: red;  
}

:-moz-any(section, article, aside, nav) h1{
    color: red;  
}

:matches(section, article, aside, nav) h1{
    color: red;  
}

:is(section.article.aside.nav) h1  {
    color: red;  
}
Copy the code

JS syntax compatibility

If the document querySelectorAll method parameter is invalid selector, abnormal will be submitted to the following:

Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': 'xxxx' is not a valid selector.
Copy the code

So try{… }catch(e){… }, do compatibility processing, see the example

let matchedItems;

try {
  matchedItems = document.querySelectorAll(':is(header, main, footer) p');
} catch(e) {
  try {
    matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
  } catch(e) {
    try {
      matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
    } catch(e) {
      console.log('Your browser doesn\'t support :is() or :any()'); }}}for(let i = 0; i < matchedItems.length; i++) {
  applyHandler(matchedItems[i]);
}

function applyHandler(elem) {
  elem.addEventListener('click'.function(e) {
    alert('This is the one contained in' + e.target.parentNode.nodeName + 'paragraph');
  });
}
Copy the code

An explanation of any() pseudo-class functions

:any() supports one or more class selectors, element selectors, or pseudo-class selectors, but does not support combination selectors and pseudo-element selectors. Such as

The following code works

:-moz-any(p.warning.new, p.error, div#topnotice){
    color:red;
}

:-moz-any(:link, :visited).external:-moz-any(:active, :focus){
    color:red;
}
Copy the code

However, the following code is invalid

/** combine selector **/
:-moz-any(div > p){
    color: red;
}
/** false element selector **/
:-moz-any(:first-letter){
    color: red;
}
Copy the code

Relevant features

:is()This prevents the selector list from being invalidated

Usually a selector list contains one or more invalid selectors, invalidating the entire selector list. The :is() pseudo-class function avoids this problem. :unsupported is an invalid selector. The list of selectors that is not used will be invalid and ignored; Using :is() ignores invalid selectors, and other selectors remain valid.

<section>
  <h1>Content of the test</h1>
</section>
<article>
  <h1>Content of the test</h1>
</article>
Copy the code

The selector is valid and the font color is red

:is(section.article,:unsupported) h1{
  color:red;
}
Copy the code

The whole selector list is invalid, and the font color color:red is not in effect

section h1.article h1,:unsupported{
    color:red;
}
Copy the code

Effect on the priority of the selector

The priority of :is() depends on the highest priority selector in its argument list. Therefore, using :is() may increase the priority of the selector.

Such as:

:is(ol..list.ul) li  {  
    color: red;
}

ol li  { 
    color:green;
}
Copy the code

The color of ol li should be green according to the nearest rule, but is() has a higher priority. List, resulting in :is(OL) li{… } has a higher priority than OL Li. Therefore, ol Li will end up with a red font color

:where() pseudo-class function

:where() has the same function and usage as :is(). The only difference is that :where() always has a priority of 0.

We can verify that. As we all know, the element selector has a priority weight of 1, so li{… } has a priority weight of 1. If the font color in li is green, it indicates that the priority weight of the selector under the influence of where() is always 0.

:where(ol..list.ul) li  {  
    color: red;
}

li { 
    color:green;
}
Copy the code

Of course, take a look at the following example to deepen your understanding. The final font color is blue

/** Priority weight is 0**/
:where(ol..list.ul) li  {  
    color: red;
}

/** Priority weight is 1+1=2**/
ol li {
    color:blue;
}

/** Priority weight is 1**/
li { 
    color:green;
}
Copy the code

reference

Css-tricks.com/almanac/sel…

Developer.mozilla.org/zh-CN/docs/…

Css-tricks.com/almanac/sel…

Css-tricks.com/using-the-s…