3 min read
•Question 43 of 49mediumWhat are :is() and :where() Selectors?
Understanding selector grouping and specificity.
What You'll Learn
- :is() and :where() syntax
- Specificity differences
- Use cases
:is() Selector
styles.cssCSS
/* Instead of */
header a, nav a, footer a { color: blue; }
/* Use */
:is(header, nav, footer) a { color: blue; }:where() Selector
Same as :is() but with zero specificity.
styles.cssCSS
/* Easy to override */
:where(header, nav, footer) a {
color: blue;
}
/* This wins (any specificity) */
a { color: red; }Specificity Comparison
styles.cssCSS
/* :is() takes highest specificity inside */
:is(#id, .class) { } /* Specificity: 1,0,0 */
/* :where() always has zero specificity */
:where(#id, .class) { } /* Specificity: 0,0,0 */Use Cases
styles.cssCSS
/* Reset styles (easy to override) */
:where(ul, ol) {
list-style: none;
padding: 0;
}
/* Group complex selectors */
:is(h1, h2, h3):is(:hover, :focus) {
color: blue;
}