CSS :is() :where() the Magic Happens
🔗 **Source:** [CSS :is() :where() the Magic Happens](https://matthiasott.com/notes/css-is-where-the-magic-happens)
> [!note]+ Document Notes
> tags: [CSS, Selectors, Web Development]
> author: Matthias Ott
> source: matthiasott.com
> reference: [https://matthiasott.com/notes/css-is-where-the-magic-happens]
> date created: 2025-10-08 00:00
>
> # 🏷️ Title: CSS :is() :where() the Magic Happens
>
<!-- deep-read:sections start -->
## 🧭 Table of Contents
- [📝 Summary](#-summary)
- [📖 Main Content](#-main-content)
- [🗒️ Notes](#️-notes)
- [📚 References](#-references)
- [🗣️ Paraphrase](#️-paraphrase)
- [📰 Newsletter](#-newsletter)
- [✅ Action Items](#-action-items)
- [🧪 Hypotheses](#-hypotheses)
- [📊 Methodology](#-methodology)
- [❓ Questions](#-questions)
- [🔮 Future Research](#-future-research)
- [💡 Implications](#-implications)
- [🧠 Learning Styles Assessment](#-learning-styles-assessment)
- [📊 Accessibility Assessment](#-accessibility-assessment)
- [🌍 DEIB Assessment](#-deib-assessment)
- [✅ Logical Validity](#-logical-validity)
- [🛡️ DARVO Analysis](#-darvo-analysis)
- [🎯 Conclusion](#-conclusion)
### 🔗 References
- CSS Selectors Level 4 Working Draft (W3C): https://www.w3.org/TR/selectors-4/
- MDN on :is(): https://developer.mozilla.org/docs/Web/CSS/:is
- MDN on :where(): https://developer.mozilla.org/docs/Web/CSS/:where
- MDN on :has(): https://developer.mozilla.org/docs/Web/CSS/:has
- State of CSS survey: https://2023.stateofcss.com/en-US/features/selectors/
## 📝 Summary
- What happened: The article explains how :is() and :where() simplify selectors, enable forgiving selector lists, and manage specificity; it also shows powerful combos with :has().
- Why it matters: Cleaner CSS, safer progressive enhancement, fewer !important overrides, and easier design system layering.
- Key stakeholders: Frontend developers, designers, and framework authors.
- Risks and tradeoffs: Misusing :is() can unintentionally raise specificity; support for :has() is newer than :is()/:where().
- Bottom line: Use :is() for brevity when specificity can rise; use :where() for zero-specificity base styles; combine with :has() for expressive patterns.
## 📖 Main Content
- Core arguments:
- Both functions accept selector lists and match any item, reducing repetition.
- They are “forgiving”: unsupported selectors inside them are ignored individually rather than invalidating the whole rule.
- Specificity differs: :is() adopts the most specific argument; :where() always remains zero, ideal for easily overridden base styles and scoped resets.
- Combining with :has() unlocks parent/context-aware styling.
- Context and terms:
- These are part of the CSS Selectors Level 4 draft and are well-supported (:has() support arrived later but is now broadly available in modern browsers).
- Uncertainties:
- Adoption remains lower than expected (e.g., “only 45% used :where()” in a recent survey), suggesting education and examples are still needed.
```css
/* Fewer repeats with lists */
:is(main, section, article, aside) :is(h1, h2, h3, h4, h5, h6) { color: blue; }
/* Forgiving selector lists */
h1:is(:-moz-nonexistent, .heading) { color: red; }
/* Zero-specificity base styles with :where() */
.card :where(h1, h2, h3, p) { margin: 0; }
/* Context-aware patterns with :has() */
section:has(:is(figure, video, iframe)) {
padding: 2rem; background: var(--media-background-color);
}
:where(article, section, aside):has(> .flexible-card) { container-type: inline-size; }
@container (width > 30em) {
.flexible-card { display: grid; grid-template-columns: 1fr 2fr; }
}
label:has(+ :is(input, select, textarea):invalid) { color: red; font-weight: 700; }
```
### 🗒️ Notes
- “Both are now widely available baseline features … yet remain a bit underused.”
- “If a selector fails [inside :is()/:where()], it will be ignored, but the rest … used by the browser.”
- “When you use :is(), [the rule] takes on the specificity of the most specific selector.”
- “If you use :where(), however, the specificity will always be 0.”
- Scoped resets and base styles commonly use :where() (e.g., inheriting form font styles).
- Combining with :has() enables container- and context-aware patterns without JS.
## 📚 References
- CSS Selectors Level 4 (W3C): https://www.w3.org/TR/selectors-4/
- MDN reference for :is(): https://developer.mozilla.org/docs/Web/CSS/:is
- MDN reference for :where(): https://developer.mozilla.org/docs/Web/CSS/:where
- MDN reference for :has(): https://developer.mozilla.org/docs/Web/CSS/:has
- State of CSS features overview: https://2023.stateofcss.com/en-US/features/selectors/
## 🗣️ Paraphrase
- Paragraph A: :is() and :where() landed in modern CSS, are widely supported, reduce repetition, yet seem underused in practice.
- Paragraph B: :is() and :where() accept selector lists, are forgiving to unsupported selectors, but differ on specificity—:is() inherits the highest in its list, :where() stays zero.
## 📰 Newsletter
Want cleaner, safer CSS without specificity wars? Matthias Ott shows how :is() and :where() compress verbose selector lists, enable forgiving matching, and keep resets override-friendly. The kicker: combine them with :has() for expressive, context-aware UI without resorting to JS. Brush up with MDN’s guides on :is(), :where(), and :has(), and revisit your utility/reset layers to remove stray !important rules.
## ✅ Action Items
#### DevRel
- Publish concise demos comparing :is() vs :where() specificity.
- Add playgrounds showing forgiving lists and progressive enhancement.
- Update docs and examples in SDKs/boilerplates.
- Track adoption in tutorials and workshops.
#### OSPO
- Add CSS lint rules highlighting risky :is() specificity.
- Include selector support checks in CI and training.
#### Community
- Run clinic on “escaping specificity traps.”
- Create “first-issue” tasks to refactor verbose selectors.
#### WordPress
- Core: audit resets to use :where() for zero-specificity bases.
- Themes: replace repetitive selectors with :is().
- Plugins: prefer :where() in components to ease overrides.
- Documentation: add examples to DevHub with support notes.
#### The WPOCC
- Fund microgrants to refactor theme CSS with modern selectors.
- Publish governance note on CSS standards adoption cadence.
### FAIR
- Policies: document feature baseline and sunset old patterns.
- Productized artifacts: publish selector style guide and scorecards.
## 🧪 Hypotheses
- Using :where() in base layers reduces !important usage by ≥50%.
- Refactoring repeated selectors to :is() shrinks CSS size by ≥10%.
- Teams using :has()+:is() reduce DOM hooks for styling by ≥30%.
### 📊 Methodology
- Pre/post refactor diffs: file size, selector count, !important count.
- Lint/CI metrics on specificity and override frequency.
- Dev surveys on ease-of-overrides and bug rates.
### ❓ Questions
- Where does :is()’s raised specificity most commonly bite?
- How broadly reliable is :has() across target browsers for production use?
### 🔮 Future Research
- Patterns combining :has() with container queries at scale.
- Tooling that auto-suggests :is()/:where() refactors.
### 💡 Implications
- Practice: simpler overrides, smaller CSS.
- Policy: baseline-driven CSS standards in repos.
- Education: specificity-first teaching with modern selectors.
### 🧠 Learning Styles Assessment
- Reading level: Flesch-Kincaid Grade ≈ 9–10.
#### 👀 Visual learners
- Present: concise code examples.
- Improve: before/after selector diagrams.
#### 🔊 Aural learners
- Improve: short audio summary of specificity rules.
#### 🗣️ Verbal learners
- Present: clear definitions and contrasts.
- Improve: analogy for “forgiving lists.”
#### 🧩 Kinesthetic learners
- Present: try-it snippets.
- Improve: step-by-step refactor exercises.
#### 🧠 Logical learners
- Present: rule-based specificity reasoning.
- Improve: decision tree for choosing :is() vs :where().
#### 🧑🤝🧑 Social learners
- Improve: discussion prompts and pair refactors.
#### 🧘♀️ Solitary learners
- Present: standalone reading.
- Improve: self-check quiz on specificity.
#### 🌿 Naturalistic learners
- Improve: ecosystem view of feature baselines.
### 📊 Accessibility Assessment
#### Screen reader semantics
- Improve: ensure examples include accessible naming context when styling forms.
#### Keyboard navigation
- Improve: show focus-visible patterns with these selectors.
#### Contrast and readability
- Present: simple examples; ensure 4.5:1 in demos.
#### Text resizing and reflow
- Improve: add prefers-reduced-motion example with :where().
#### Media and captions
- Improve: provide transcripts if talks are linked.
#### Forms and interactions
- Present: label/input patterns with :has().
- Improve: include error messaging semantics.
#### Standards reference
- Map examples to WCAG 2.2 AA where relevant.
### 🌍 DEIB Assessment
#### Cultural breadth
- Improve: internationalized examples and RTL considerations.
#### Inclusive language
- Present: neutral tone.
- Improve: glossary for newer CSS terms.
#### Neurodiversity support
- Present: chunked sections.
- Improve: consistent callouts for “use :where() when…”.
#### Representation
- Improve: diverse imagery in future demos.
#### Psychological safety
- Present: supportive, non-dogmatic guidance.
### ✅ Logical Validity
#### Strong reasoning
- Inductive: real-world patterns show :where() eases overrides—fits the specificity model.
- Causal: specificity rules explain why :is() can block overrides.
#### Fallacies
- None apparent; survey stat is illustrative, not overgeneralized.
#### Tone of voice
- Practical, inviting experimentation.
### 🛡️ DARVO Analysis
- No denial, attack, or role-reversal present; constructive technical guidance.
## 🎯 Conclusion
- Bottom line: Use :is() to compress selectors when higher specificity is acceptable; prefer :where() for base layers that must be easy to override; combine with :has() for powerful, context-aware styling.
- Next steps: Audit your CSS for repetition and specificity hotspots; refactor to :is()/:where(); add a few :has()-based patterns where supported.
## 🧱 Refactor Appendix (append after 🎯 Conclusion)
### 📚 Literature Split Pad
- Purpose: Stage Konik CEE units that become per-source Literature notes.
- Split level: H3.
- Include verbatim quotes under 25 words and a [view highlight] link.
### [H1] :where() keeps specificity at zero
> [!quote] [CSS :is() :where() the Magic Happens](https://matthiasott.com/notes/css-is-where-the-magic-happens) by [[Matthias Ott]] via [[matthiasott.com]]. Published 2025-10-07. Accessed 2025-10-08.
> “If you use :where(), however, the specificity will always be 0.”
Use for global/base styles to ease overrides.
[view highlight](https://matthiasott.com/notes/css-is-where-the-magic-happens#H1) #xref #articleseed ID:rw_[MISSING]
### [H2] :is() adopts the most specific argument
> [!quote] [CSS :is() :where() the Magic Happens](https://matthiasott.com/notes/css-is-where-the-magic-happens)
> “When you use :is(), the rule takes on the specificity of the most specific selector.”
Expect higher specificity; plan overrides accordingly.
[view highlight](https://matthiasott.com/notes/css-is-where-the-magic-happens#H2) #xref ID:rw_[MISSING]
---
### 🔖 Atomic Split Pad (Zettel Candidates)
#### [Z1] :where() simplifies override-friendly base layers
- Applies to resets and design systems.
- Links: [[CSS Specificity]] [[Design Tokens]]
#### [Z2] :is() reduces duplication with tradeoff specificity
- Applies when verbosity is high and overrides are controlled.
- Links: [[CSS Selectors]] [[Specificity Management]]
---
### ✏️ Fleeting Queue (Extract by Selection)
- [F1] Audit base styles to replace repeats with :where() — context/https://matthiasott.com/notes/css-is-where-the-magic-happens #fleeting #inbox
- [F2] Add :has()+:is() demo for invalid form labels — context/https://matthiasott.com/notes/css-is-where-the-magic-happens #fleeting #inbox
- [F3] Lint rule to warn on high-specificity :is() — context/https://matthiasott.com/notes/css-is-where-the-magic-happens #fleeting #inbox
---
<!-- deep-read:sections end -->