Keynote: The Platform Is the Framework
\nRead the full abstract.
\n Save to my schedule\nWaypoint’s schedule page started life as a quick prototype, and its stylesheet shows it. Somewhere near the top sits #schedule article a { color: #1d4ed8; }, and every time the design team adds a button-styled link inside a session card, the button text turns blue. Someone “fixed” it last month with !important. Now nobody can theme the button.
This is a specificity problem, and the fix isn’t a bigger hammer. It’s choosing how much weight each selector should carry.
\nThe browser scores every selector as a triple, often written (A, B, C):
\n| Column | \nCounts | \nExamples | \n
|---|---|---|
| A | \nID selectors | \n#schedule | \n
| B | \nclasses, attributes, pseudo-classes | \n.session, [type="checkbox"], :hover | \n
| C | \ntype selectors, pseudo-elements | \narticle, a, ::before | \n
The universal selector * and combinators (space, >, +, ~) add nothing. To compare two selectors, compare column A; only if it ties, compare B; only if that ties, compare C. There is no carrying: eleven classes (0,11,0) still lose to one ID (1,0,0). The old advice to “add up the points” (100 per ID, 10 per class) breaks exactly there, so forget it.
Score the Waypoint conflict:
\n#schedule article a { color: #1d4ed8; } /* (1, 0, 2) */\n.btn { color: #fff; } /* (0, 1, 0) */The ID in the first selector wins in column A, so the button text turns blue. Moving .btn lower in the file changes nothing.
:is(): grouping with a catch:is() takes a selector list and matches if any of them match. It saves you from repeating long selectors:
/* Before */\n.session h2, .session h3, .session h4 { text-wrap: balance; }\n\n/* After */\n.session :is(h2, h3, h4) { text-wrap: balance; }The catch is the specificity rule: :is() takes the specificity of its most specific argument, whichever one actually matched. :is(#featured, .session) h2 scores (1,0,1) on every .session h2, even ones with no ID nearby. :not() and :has() follow the same rule.
:is() also uses a forgiving selector list. In a plain list like .a, .b:unknown, one unrecognised selector invalidates the whole rule. Inside :is() the browser drops only the bad argument and keeps the rest.
:where(): the zero-weight wrapper:where() matches exactly like :is(), with one difference: its specificity is always zero, no matter what’s inside. That makes it the tool for any style that is meant to be a default:
/* Base link style: (0,0,1) because only the trailing `a` counts */\n:where(#schedule article) a {\n color: #1d4ed8;\n text-decoration: underline;\n}\n\n/* Component: (0,1,0) beats (0,0,1) */\n.btn {\n color: #fff;\n background: #6d28d9;\n text-decoration: none;\n}The base rule still only applies inside #schedule articles, so its reach is unchanged. Only its weight dropped. Now any class-based component wins without tricks.
A useful default for a whole codebase: wrap resets and element defaults in :where(), write components with a single class, and keep state selectors (.btn:hover, .btn[aria-pressed="true"]) one step heavier than the component.
When a rule loses, you have four options. Here they are in the order I reach for them:
\n:where(). This fixes the cause, and every future component benefits..btn.btn, adds (0,1,0) without changing what matches. It’s a legitimate, local hack, but every repetition is a debt the next override has to pay.!important. Keep it for utilities that must always win and for accessibility overrides. Used to patch a single conflict, it starts an arms race, because the only way to beat it is another !important.You don’t have to count by hand forever. Hover a selector in the Chrome or Firefox Styles panel and the tooltip shows its specificity triple. Use it to check your mental arithmetic for a week; after that, you’ll rarely need it.
\nThe exercise gives you the Waypoint session card with the prototype’s link rule. Lower the base rule’s weight so the button looks like a button again, while normal links keep their blue underline. You’ll fix this at a larger scale in the next lesson, where cascade layers let you decide which groups of styles win, before specificity is even consulted.
\n","toc":[{"id":"sec-1","text":"Specificity is three numbers, not one","level":2},{"id":"sec-2","text":":is(): grouping with a catch","level":2},{"id":"sec-3","text":":where(): the zero-weight wrapper","level":2},{"id":"sec-4","text":"Four ways to win a specificity fight","level":2},{"id":"sec-5","text":"Reading specificity in DevTools","level":2},{"id":"sec-6","text":"Your turn","level":2}],"takeaways":["Specificity is three separate counts (IDs, then classes/attributes/pseudo-classes, then types/pseudo-elements) compared column by column, never added into one number.",":is(), :not() and :has() take the specificity of their most specific argument, even when a less specific argument is the one that matched.",":where() always has zero specificity, which makes it the right wrapper for resets and base styles that should lose to any component.",":is() and :where() use forgiving selector lists: one invalid selector inside them doesn’t throw away the whole rule."],"further":[{"title":"Specificity (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Specificity"},{"title":":where() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:where"},{"title":":is() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:is"}],"quiz":[{"q":"What is the specificity of nav#main a.active:hover?
#main); one class plus one pseudo-class (.active, :hover); two types (nav, a)."},{"text":"(1, 1, 2)","why":"Pseudo-classes such as :hover count in the middle column alongside classes, so there are two there, not one."},{"text":"(1, 2, 1)","why":"Both nav and a are type selectors, so the last column is 2."},{"text":"(0, 3, 2)","why":"#main is an ID selector, which belongs in the first column, not with the classes."}],"answer":0},{"q":"Which color does the link get?
\n:is(#sidebar, .card) a { color: red; }\n.card .card-link { color: blue; }<div class=\"card\"><a class=\"card-link\" href=\"#\">Read</a></div>.card, not #sidebar.","why":":is() doesn’t care which argument matched. It always takes the specificity of its most specific argument, here an ID."},{"text":"red, because :is() takes the specificity of #sidebar.","why":"Correct. The first rule scores (1,0,1) and beats (0,2,0), even though the element has no ID at all."},{"text":"blue, because it comes later in the stylesheet.","why":"Order only matters when specificity ties, and (1,0,1) beats (0,2,0) outright."}],"answer":1},{"q":"Your reset has ul[class] { list-style: none; margin: 0; } and a component’s .tags { margin-block: 1rem; } loses. What is the cleanest fix?
!important to the component’s margin.","why":"That wins this fight but starts an escalation; the next override needs !important too, and you lose the ability to theme."},{"text":"Raise the component selector to ul.tags.tags.","why":"It works, but every component now has to out-score the reset, which is the arms race you want to end."},{"text":"Rewrite the reset as :where(ul[class]) { … }.","why":"Correct. The reset drops to zero specificity, so any class selector in a component overrides it."}],"answer":2},{"q":"A rule is written :is(.card, :future-state) h3 { … } and the browser doesn’t recognise :future-state. What happens?
:is() and :where() use forgiving selector lists."},{"text":"The rule still applies to .card h3; only the unknown selector is ignored.","why":"Correct. Forgiving parsing discards the invalid argument and keeps the rest."},{"text":"Chrome throws a console error and stops parsing the stylesheet.","why":"CSS never stops parsing on errors; it discards what it can’t understand and carries on."}],"answer":1}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"Read the full abstract.
\n Save to my schedule\nRead the full abstract.
\n Save to my schedule\nThe prototype rule #schedule article a turns the Save to my schedule button blue and underlined. Change the base link rule only so that .btn gets its white, non-underlined style back, while the normal .abstract-link stays blue (#1d4ed8) and underlined. Don’t edit the .btn rule, don’t touch the HTML, and don’t use !important.
#schedule article a is (1,0,2) and .btn is (0,1,0). Which column decides it?","You want the base rule to keep applying only inside #schedule articles, but with less weight.","Wrap the context in :where(): :where(#schedule article) a { … } scores (0,0,1)."],"explanation":":where() keeps the selector’s reach but contributes zero specificity, so :where(#schedule article) a scores (0,0,1). The .btn rule scores (0,1,0) and now wins on color and text decoration, while plain links inside the article still match the base rule. Removing the ID entirely (for example article a) would also pass, but :where() lets you keep the scoping the prototype intended.