:where()

Die :where() Pseudoklasse erfordert eine Selektorliste, eine kommagetrennte Liste von einem oder mehreren Selektoren, als Argument. Die Liste darf kein Pseudoelement enthalten, aber alle anderen einfachen, zusammengesetzten und komplexen Selektoren sind erlaubt.

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

Die Spezifikation definiert :is() und :where() als akzeptierend eine fehlertolerante Selektorliste.

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

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

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

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

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

Dieses Beispiel zeigt, wie :where() funktioniert und veranschaulicht auch 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, einen Seitenrand und eine Fußzeile enthalten. Sie unterscheiden sich durch die Klassen, die verwendet werden, um die Kindelemente zu markieren.

Um die Auswahl von Links zu gruppieren und gleichzeitig die is-styling und where-styling Stile unterschiedlich zu halten, 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 überschreiben möchten?

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.

Allerdings haben Selektoren innerhalb von :where() eine Spezifität von 0, so dass der orangefarbene Link in der Fußzeile durch unseren nur aus Typen bestehenden zusammengesetzten Selektor überschrieben wird.

• :is()
• Selektorliste
• Webkomponenten