:where()

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.

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

Die Spezifikation definiert :is() und :where() als akzeptierend für eine tolerante Selektorliste.

In CSS wird bei Verwendung einer Selektorliste die gesamte Liste als ungültig betrachtet, wenn einer der Selektoren ungültig ist. Bei Verwendung von :is() oder :where() wird anstelle der gesamten Liste ungültiger Selektoren nur der falsche oder nicht unterstützte Selektor ignoriert, während die anderen verwendet werden.

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

Wird weiterhin korrekt geparst und stimmt mit :valid überein, selbst in Browsern, die :unsupported nicht unterstützen, wohingegen:

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

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

Dieses Beispiel zeigt, wie :where() funktioniert, und illustriert außerdem den Unterschied zwischen :where() und :is().

Betrachten Sie das folgende 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 Randnotiz und einen Footer enthalten. Sie unterscheiden sich durch die Klassen, die verwendet werden, um die Kindelemente zu markieren.

Um die Auswahl von Links zu gruppieren, während die Stile is-styling und where-styling getrennt bleiben, könnten wir :is() oder :where() auf folgende Weise verwenden:

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 aber, wenn wir später die Farbe der Links in den Fußzeilen mit einem zusammengesetzten Selektor aus Selektoren mit niedriger Spezifität ändern wollen?

footer a {
  color: blue;
}

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

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

• :is()
• Selektorliste
• Web-Komponenten