:where()

Probieren Sie es aus

ol { list-style-type: upper-alpha; color: darkblue; } /* Not applied to ol, because of lower specificity */ :where(ol, ul, menu:unsupported) :where(ol, ul) { color: green; } :where(ol, ul) :where(ol, ul) ol { list-style-type: lower-greek; color: chocolate; } 

<ol> <li>Saturn</li> <li> <ul> <li>Mimas</li> <li>Enceladus</li> <li> <ol> <li>Voyager</li> <li>Cassini</li> </ol> </li> <li>Tethys</li> </ul> </li> <li>Uranus</li> <li> <ol> <li>Titania</li> <li>Oberon</li> </ol> </li> </ol> 

Syntax

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

Parameter

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

Verzeihende Selektor-Parsing

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

Beim Einsatz einer Selektorliste in CSS wird die gesamte Liste als ungültig betrachtet, wenn einer der Selektoren ungültig ist. Wenn :is() oder :where() verwendet wird, wird nicht die ganze Liste als ungültig betrachtet, wenn einer der Selektoren nicht geparst werden kann. Der falsche oder nicht unterstützte Selektor wird ignoriert und die anderen werden verwendet.

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

Wird weiterhin korrekt geparst und :valid matchen, selbst in Browsern, die :unsupported nicht unterstützen, während:

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

In Browsern ignoriert wird, die :unsupported nicht unterstützen, auch 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().

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, ein Nebenelement und eine Fußzeile enthalten. Sie unterscheiden sich durch die Klassen, die verwendet werden, um die Kindelemente zu kennzeichnen.

Um die Auswahl von Links zu gruppieren, während die is-styling- und where-styling-Stile unterschieden bleiben, könnten wir :is() oder :where() folgendermaßen 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 selektiven Typselektoren ü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 zählen, und Klassenselektoren eine höhere Spezifität als Elementselektoren haben.

Jedoch haben Selektoren innerhalb von :where() eine Spezifität von 0, sodass der orangefarbene Fußzeilenlink von unserem nur aus Typen bestehenden zusammengesetzten Selektor überschrieben wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• :is()
• Selektorliste
• Webkomponenten