:is() und :where() – kürzere Selektoren, und einer davon wiegt nichts

Wer kennt sie nicht, die Selektor-Treppe:

.inhalt h2,
.inhalt h3,
.inhalt h4 { margin-top: 2rem; }

.karte h2,
.karte h3,
.karte h4 { margin-top: 1rem; }

Bei zwei Containern sind das schon sechs Zeilen; bei vier Containern mit vier Elementtypen sechzehn. :is() nimmt eine Liste und gilt für jeden Treffer darin.

:is() – eine Liste statt vieler Zeilen

:is(.inhalt, .karte) :is(h2, h3, h4) {
  margin-top: 2rem;
}

Gleiche Wirkung, eine Zeile, und beim Hinzufügen eines Containers änderst du genau eine Stelle.

Der Haken: :is() erbt die höchste Spezifität aus seiner Liste

:is(#haupt, .karte) p { color: red; }

Dieser Selektor wiegt so viel wie #haupt p – die stärkste Angabe in der Klammer zählt, auch wenn der Treffer über .karte zustande kam. Eine spätere Regel .karte p { color: blue; } verliert dann, und niemand versteht warum.

:where() – dieselbe Gruppierung, Gewicht null

:where(#haupt, .karte) p { color: red; }
.karte p { color: blue; }   /* gewinnt */

:where() zählt in der Spezifität als 0. Genau das macht es zum richtigen Werkzeug für alles, was überschreibbar bleiben soll: Grundstile, Resets, Vorgaben einer Komponentenbibliothek.

/* Basisabstände, die jede Seite ohne !important korrigieren darf */
:where(h1, h2, h3, p, ul, ol) { margin-block: 0 .75em; }

/* Bewusst stark: der aktive Zustand soll gewinnen */
:is(.tab, .pill).is-aktiv { border-color: var(--accent); }

Nebenbei: verzeihende Fehlerbehandlung

In einer klassischen Selektorliste macht ein unbekannter Selektor die ganze Regel ungültig. Innerhalb von :is() und :where() wird nur der unbekannte Teil verworfen, der Rest greift weiter – praktisch, wenn du herstellerabhängige Pseudoelemente mischst:

:where(::-webkit-input-placeholder, ::placeholder) { color: #8b95a5; }

Fallstrick

:is() und :where() dürfen (noch) nicht mit Pseudoelementen wie ::before in der Liste umgehen, und sie ersetzen keine Verschachtelung: Wer alles in :where() packt, hat am Ende ein Stylesheet ohne jedes Gewicht, in dem die Quellreihenfolge allein entscheidet. Die Mischung ist die Kunst – Grundlagen mit :where(), Zustände mit :is() oder ganz normalen Klassen.

Wartbares CSS ist kein Selbstzweck: Es entscheidet, wie teuer die nächste Änderung wird. Melde dich über bymw.de.

Quellen

• :is() – MDN Web Docs
• :where() – MDN Web Docs
• Selectors Level 4 – Matches-any and zero-specificity pseudo-classes (W3C)