:where()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

Die :where() CSS Pseudoklassenfunktion nimmt eine Liste von Selektoren als Argument und wählt jedes Element aus, das durch einen der Selektoren in dieser Liste ausgewählt werden kann.

Der Unterschied zwischen :where() und :is() besteht darin, dass :where() immer eine Spezifität von 0 hat, während :is() die Spezifität des spezifischsten Selektors in seinen Argumenten übernimmt.

Probieren Sie es aus

Syntax

Die :where()-Pseudoklasse erfordert eine Selektorliste, eine durch Kommas getrennte Liste von einem oder mehreren Selektoren, als Argument. Die Liste darf keine Pseudoelemente enthalten, aber alle anderen einfachen, zusammengesetzten und komplexen Selektoren sind erlaubt.

css
:where(<complex-selector-list>) {
  /* ... */
}

Fehlerverzeihende Selektor-Analyse

Die Spezifikation definiert :is() und :where() so, dass sie eine fehlerverzeihende Selektorliste akzeptieren.

In CSS gilt bei der Verwendung einer Selektorliste, dass die gesamte Liste als ungültig angesehen wird, wenn einer der Selektoren ungültig ist. Bei der Verwendung von :is() oder :where() wird jedoch, wenn ein Selektor nicht analysiert werden kann, der fehlerhafte oder nicht unterstützte Selektor ignoriert, während die anderen verwendet werden, anstatt die gesamte Liste als ungültig zu betrachten.

css
:where(:valid, :unsupported) {
  /* … */
}

Wird weiterhin korrekt analysiert und passt zu :valid, selbst in Browsern, die :unsupported nicht unterstützen, während:

css
:valid,
:unsupported {
  /* … */
}

In Browsern ignoriert wird, die :unsupported nicht unterstützen, selbst wenn sie :valid unterstützen.

Beispiele

Vergleich von :where() und :is()

Dieses Beispiel zeigt, wie :where() funktioniert, und verdeutlicht auch den Unterschied zwischen :where() und :is().

Folgender HTML-Code wird verwendet:

html
<article>
  <h2>:is()-styled links</h2>
  <section class="is-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="is-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="is-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

<article>
  <h2>:where()-styled links</h2>
  <section class="where-styling">
    <p>
      Here is my main content. This
      <a href="https://mozilla.org">contains a link</a>.
    </p>
  </section>

  <aside class="where-styling">
    <p>
      Here is my aside content. This
      <a href="https://developer.mozilla.org">also contains a link</a>.
    </p>
  </aside>

  <footer class="where-styling">
    <p>
      This is my footer, also containing
      <a href="https://github.com/mdn">a link</a>.
    </p>
  </footer>
</article>

In diesem etwas konstruierten Beispiel haben wir zwei Artikel, die jeweils einen Abschnitt, eine Nebenbemerkung und einen Footer enthalten. Sie unterscheiden sich durch die Klassen, die verwendet werden, um die Kind-Elemente zu kennzeichnen.

Um die Auswahl von Links zu gruppieren und dabei die is-styling- und where-styling-Stile verschieden zu halten, könnten wir :is() oder :where() wie folgt verwenden:

css
html {
  font-family: sans-serif;
  font-size: 150%;
}

:is(section.is-styling, aside.is-styling, footer.is-styling) a {
  color: red;
}

:where(section.where-styling, aside.where-styling, footer.where-styling) a {
  color: orange;
}

Was ist jedoch, wenn wir später die Farbe der Links in den Footern mit einem zusammengesetzten Selektor aus Selektoren mit niedriger Spezifität überschreiben wollen?

css
footer a {
  color: blue;
}

Dies wird für die roten Links nicht funktionieren, da die Selektoren innerhalb von :is() zur Spezifität des gesamten Selektors beitragen und Klassenselektoren eine höhere Spezifität als Elementselektoren haben.

Selektoren innerhalb von :where() haben jedoch eine Spezifität von 0, sodass der orangefarbene Footer-Link durch unseren ausschließlich aus Typen bestehenden zusammengesetzten Selektor überschrieben wird.

Hinweis: Sie können dieses Beispiel auch auf GitHub finden: is-where.

Spezifikationen

Specification
Selectors Level 4
# zero-matches

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:where()
Support for forgiving selector list

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch