What are the new CSS :where and :is pseudo-class functions?

What are :is and :where?

:is() and :where() are pseudo-functions that can help shorten and stop repetition when creating selectors. They all accept an array of selectors (id, class, tag, etc.) and select any element that can be selected in that list.

This probably doesn’t make much sense in terms of how it helps us write shorter selectors, so let’s try using :where() 和:is() .

How to use :is and :where?

:where() can help us solve problems like this

.btn span > a:hover,
#header span > a:hover,
#footer span > a:hover {
  ...;
}

Become something like this

:where(.btn, #header, #footer) span > a:hover {
  ...;
} 

and :is() can help add the same to this example

is(.btn, #header, #footer) span > a:hover {
  ...;
}

What is the difference between :isand :where?

:where() and :is() both look and function the same, but there is one difference between them to keep in mind, and that is they have different specificities 。:where() is simple and always has a specificity of 0, while :is() has the strongest specificity of any selector.

What is CSS specificity (in a nutshell)?

There are four levels of specificity in CSS. Each level or category has a different score, and we can add up all the scores to calculate the specificity of the selector.

The element with the highest number of selectors will have its styles applied to it, which is why sometimes when you write CSS, your styles won’t be applied and will show up as crossed out in the developer tools.

Specificity rating score

• ID - specificity score is 100
• Inline styles – specificity score is 1000
• Elements and pseudo-classes – a specificity score of 1
• Classes, pseudo-classes, and attributes – specificity score is 10

For example

button.btn {
  color: red;
}
.btn {
  color: green;
}

.btn = 10

button.btn = 1 + 10 = 11

If we put the .btn class on the <button> tag, the text will turn red because button.btn selector has a higher score than the .btn selector.

As you can see, there are two different levels of specificity for pseudo-classes. This is because different pseudo-classes can have different levels of specificity, depending on which pseudo-classes you use and how you use them.

This is the end of this article about what the newly added CSS :where and :is pseudo-class functions are. For more relevant CSS :where and :is pseudo-class function content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!