:is() and :where() - The New Functional Pseudo-class Selectors

Meet the new Pseudo-class Selectors of the CSS family.

:is() and :where().

What's their need, how they are changing the code, and a lot more questionnaires? The same was happening to me too. After reading the blogs and practical examples, I understood that necessity.

Sharing my understanding, with all of you CSS folks out there.

Example:

.header h1,
.header p,
.header button,
.header :button{
  color: tomato;
  font-size: 1.2rem;
}        

These huge selectors on the above snippets which are separated by [, ](comma) seem normal, but theirs one gotcha! If any of one is wrong declared, these all will be ignored by the browser. and instantly the code becomes garbage.

So, these selectors are basically forgiving you for errors.

.header :is(h1, p, button, :button){
  color: tomato;
  font-size: 1.2rem;
}        

Even, if the last selector element is invalid but the browser will not invalidate you whole code. Saviour!!!

Difference in :is() vs :where()

• :where() has no specificity.
• :is() will take the specificity of the highest among the parameters

Thanks for reading. Comment your questions as well.