:is() versus :where(): same matching, different specificity
Card B has no id, yet it is crimson: the :is() rule scores as an ID selector for every element it matches. The :where() rule loses even to a bare li.
Four functional pseudo-classes add logic to selectors: :not() excludes, :is() and :where() say "any of these" (with full or zero specificity), and :has() selects an element by what it contains or what follows it, the long-awaited parent selector.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Give every button except those with class ghost a solid blue background, in one rule.
Write a reset that removes list bullets and padding from any ul or ol that has a class, with zero specificity so any later rule can add them back.
Highlight a .field wrapper with a red left border when the input inside it is invalid.
Explain it without notes
Compare :is() and :where(): how do they match, and how does their specificity differ?
What is the specificity of .btn:not(#primary)? Why can that cause trouble?
What problem does :has() solve, and give three practical examples.
What is a forgiving selector list, and which of these four functions has one?
Preview
Console
Nothing logged yet.Expected console output
Card A: rgb(220, 20, 60)
Card B: rgb(220, 20, 60)
List item: rgb(46, 139, 87)