Q38: What is the difference between :is() and :where() pseudo-classes?
Both :is() and :where() group multiple selectors to reduce duplication. The critical difference is specificity:
:is()adopts the specificity score of its most specific argument selector.:where()carries zero specificity score (0,0,0), making rules easy to override later.
:is() vs :where() Specificity
/* Score: (1,0,0) due to #header argument */
:is(header, #header, footer) p {
color: blue;
}
/* Score: (0,0,1) because :where carries zero weight */
:where(header, #header, footer) p {
color: red;
}💡 :where() evaluates with zero specificity weight, allowing easy overrides without requiring high-specificity rules.
Key Takeaways
:is()adopts the specificity of its highest argument selector.:where()carries zero specificity weight (0,0,0) for easy utility overrides.
Knowledge Check
What is the calculated specificity score added by the :where() pseudo-class container itself?