:where

Der Pseudo-Selektor :where() in CSS ist funktional identisch mit dem :is() Pseudo-Selektor, da er eine kommagetrennte Liste von Selektoren entgegennimmt, gegen die abgeglichen wird. Der Unterschied ist, dass :is() die *spezifischste* unter ihnen als Spezifität für diesen Teil nimmt, während die Spezifität von :where() immer Null (0) ist.

Zum Beispiel:

main :where(h1, h2, h3) {
  color: orange;
}

Passt, als ob Sie diesen Selektor so geschrieben hätten

main h1, main h2, main h3 {
  color: orange;
}

...außer dass die Spezifität des obigen ersten Beispiels (0, 0, 0, 1) für den einzelnen Element-Selektor (main) ist und nicht die Spezifität von irgendetwas im :where()-Teil enthält. Im zweiten Beispiel ist die Spezifität (0, 0, 0, 2), da es zwei Element-Selektoren gibt.

Entscheidung über die Spezifitätsbehandlung

Es ist eine schwierige Entscheidung, ob Sie die Spezifität von :is() oder die Null-Spezifität von :where() wünschen. Ich würde jedoch argumentieren, dass die Beibehaltung einer niedrigen Spezifität im Allgemeinen zu weniger Kopfschmerzen führt als die Arbeit mit Elementen, die eine höhere Spezifität haben.

Stellen Sie sich ein klassisches Layout vor

<header class="header"></header>
<main class="main"></header>
<aside class="aside"></aside>
<footer class="footer"></footer>

Wenn ich die Links in der Kopfzeile und im Fußzeilenbereich auswählen möchte, könnte ich...

:is(.header, .footer) a {
  color: red;
}

Dieser Selektor ist (0, 0, 1, 0), was bedeutet, wenn ich schreiben würde

header a {
  color: orange;
}

Dieser Selektor ist mit (0, 0, 0, 2) weniger spezifisch und wird den anderen nicht überschreiben. Aber wenn ich schreiben würde

:where(.header, .footer) a {
  color: red;
}

Das ist nur (0, 0, 0, 1), also *wird* meine Überschreibung funktionieren.

Vielleicht ein weniger konstruiertes Beispiel ist die Auswahl einer Kopfzeile anhand einer ID, ohne auf eine ID-basierte Spezifität zurückgreifen zu müssen.

h3:where(#specific-header) {
  outline: 1px solid yellow;
}

Dort habe ich eine Kopfzeile mit einer bestimmten ID ausgewählt. IDs haben eine sehr hohe Spezifität – (0, 1, 0, 0) – die schwer zu überschreiben ist, aber hier habe ich es geschafft, *nur diese Kopfzeile* auszuwählen, ohne dabei eine extrem hohe Spezifität zu verwenden.

Fehlertolerante Selektoren

Jeder Selektor innerhalb der kommagetrennten Liste in :where(x, y, z) ist fehlertolerant, da er ignoriert wird, wenn er ungültig ist. Das ist wichtig, da er nicht den gesamten Selektor unwirksam macht, wie es ungültige Selektoren normalerweise tun. Für weitere Informationen sehen Sie, wie es mit dem :is()-Selektor funktioniert, da es identisch ist.

:where(h1, totally:fake) {
  /* will still select h1 */
}

Browser-Unterstützung

IE	Edge	Firefox	Chrome	Safari	Opera
Nein	88	78	88	14	74

Android Chrome	Android Firefox	Android Browser	iOS Safari	Opera Mobile
Alle	Alle	91	14.4	Nein

Weitere Informationen

Verwandt