🎯 CSS where() — Complete Tutorial

The CSS where() functional selector lets you group multiple selectors together **without adding specificity**. It behaves like :is(), but with one major difference:

>>where() always has 0 specificity — even if its internal selectors are very specific.

Note

✔ Used to group selectors cleanly
✔ Helps manage large CSS architectures
✔ Prevents specificity battles
✔ Safe for utility + component systems

📦 Syntax

where() syntax

where(selector, selector, ...) { 
  /* styles */
}

📌 where() vs is()

Feature:is():where()
SpecificityMatches the MOST specific selector insideAlways 0 specificity
Use caseSpecific, controlled matchingGlobal or reset-like matching
Good forAdvanced selectorsDesign systems, resets, utilities

Note

Use where() when you want grouping **without affecting the cascade**.

🎨 1. Group Selectors Without Specificity

Group elements

where(h1, h2, h3) {
  color: #333;
  margin-bottom: 12px;
}

This applies to all headings with zero specificity — easy to override later.

🎨 2. Style Form Controls Together

Form controls

where(input, select, textarea) {
  font-size: 1rem;
  padding: 8px;
  border-radius: 6px;
}

🎨 3. Combine where() with Class Selectors

Buttons

.btn where(a, button) {
  text-decoration: none;
  display: inline-block;
}

Adds styles to both links and button tags inside .btn elements.

🎨 4. Component Scoping Without Specificity Inflation

Component reset

.card where(h1, h2, p, ul) {
  margin: 0;
  padding: 0;
}

Note

Excellent for component libraries where specificity should stay low.

🎨 5. Reset Margins for All Text Elements

Global reset

where(h1, h2, h3, p, ul, ol) {
  margin: 0;
}

Because specificity is 0, this is easy to override later.

🎨 6. Modern Utility Framework Example

Utility pattern

.text-large where(h1, h2) {
  font-size: 2rem;
}

🧪 Real-World Use Cases

1️⃣ Design Systems & Component Libraries

Avoid specificity wars by grouping selectors safely.

Card component

.card where(h1, h2, h3) {
  font-weight: 500;
}

2️⃣ Framework-like Resets (Tailwind / Bootstrap Style)

Resets

where(a, button) {
  cursor: pointer;
}

3️⃣ Input Normalization

Input normalization

where(input, textarea) {
  outline-offset: 2px;
}

⚠️ Common Mistakes

  • ❌ Thinking :where() increases specificity — it does NOT
  • ❌ Using :where() inside highly specific selectors (unnecessary)
  • ❌ Using :where() for selectors needing strong override power

Note

If you want **low specificity**, use where().
If you want **controlled specificity**, use is().

🔥 Summary

where() is a powerful CSS tool for grouping selectors without changing specificity. It is ideal for resets, utilities, design systems, and consistent component styling.

>>“where() keeps your CSS clean, scalable, and specificity-proof.”