:is() CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2021 browserübergreifend verfügbar.
Die :is()-CSS-Pseudoklasse-Funktion nimmt eine Selektorenliste als Argument und wählt jedes Element aus, das von einem der Selektoren in dieser Liste ausgewählt werden kann. Dies ist nützlich, um große Selektoren in kompakter Form zu schreiben.
Hinweis:
Ursprünglich :matches() (und :any()) genannt, wurde dieser Selektor in :is() in CSSWG issue #3258 umbenannt.
Probieren Sie es aus
ol {
list-style-type: upper-alpha;
color: darkblue;
}
:is(ol, ul, menu:unsupported) :is(ol, ul) {
color: green;
}
:is(ol, ul) :is(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
:is(<forgiving-selector-list>) {
/* ... */
}
Parameter
Die :is()-Pseudoklasse erfordert eine Selektorenliste, 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.
Unterschied zwischen :is() und :where()
Der Unterschied zwischen den beiden besteht darin, dass :is() zur Spezifität des gesamten Selektors zählt (es nimmt die Spezifität seines spezifischsten Arguments an), während :where() einen Spezifitätswert von 0 hat. Dies wird im Beispiel auf der :where()-Referenzseite demonstriert.
Verzeihendes Selektorenparsing
Die Spezifikation definiert :is() und :where() so, dass sie eine verzeihende Selektorenliste akzeptieren.
In CSS, bei der Verwendung einer Selektorenliste, wird die gesamte Liste als ungültig angesehen, wenn einer der Selektoren ungültig ist. Bei der Verwendung von :is() oder :where() wird, anstatt die gesamte Liste als ungültig zu betrachten, der inkorrekte oder nicht unterstützte Selektor ignoriert und die anderen verwendet.
:is(:valid, :unsupported) {
/* … */
}
Wird immer noch korrekt geparst und mit :valid übereinstimmen, 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
Vereinfachen von Listenselektoren
Die :is()-Pseudoklasse kann Ihre CSS-Selektoren erheblich vereinfachen. Zum Beispiel, nehmen Sie das folgende CSS:
/* 3-deep (or more) unordered lists use a square */
ol ol ul,
ol ul ul,
ol menu ul,
ol dir ul,
ol ol menu,
ol ul menu,
ol menu menu,
ol dir menu,
ol ol dir,
ol ul dir,
ol menu dir,
ol dir dir,
ul ol ul,
ul ul ul,
ul menu ul,
ul dir ul,
ul ol menu,
ul ul menu,
ul menu menu,
ul dir menu,
ul ol dir,
ul ul dir,
ul menu dir,
ul dir dir,
menu ol ul,
menu ul ul,
menu menu ul,
menu dir ul,
menu ol menu,
menu ul menu,
menu menu menu,
menu dir menu,
menu ol dir,
menu ul dir,
menu menu dir,
menu dir dir,
dir ol ul,
dir ul ul,
dir menu ul,
dir dir ul,
dir ol menu,
dir ul menu,
dir menu menu,
dir dir menu,
dir ol dir,
dir ul dir,
dir menu dir,
dir dir dir {
list-style-type: square;
}
Sie können es ersetzen mit:
/* 3-deep (or more) unordered lists use a square */
:is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
list-style-type: square;
}
Vereinfachen von Abschnittsselektoren
Die :is()-Pseudoklasse ist besonders nützlich bei der Arbeit mit HTML-Abschnitten und Überschriften. Da <section>, <article>, <aside>, und <nav> häufig zusammen geschachtelt sind, kann es ohne :is() schwierig sein, sie einheitlich zu stylen.
Zum Beispiel könnte ohne :is(), das Stylen aller h1-Elemente in verschiedenen Tiefen sehr kompliziert sein:
/* Level 0 */
h1 {
font-size: 30px;
}
/* Level 1 */
section h1,
article h1,
aside h1,
nav h1 {
font-size: 25px;
}
/* Level 2 */
section section h1,
section article h1,
section aside h1,
section nav h1,
article section h1,
article article h1,
article aside h1,
article nav h1,
aside section h1,
aside article h1,
aside aside h1,
aside nav h1,
nav section h1,
nav article h1,
nav aside h1,
nav nav h1 {
font-size: 20px;
}
/* Level 3 */
/* don't even think about it! */
Mit :is() ist es jedoch viel einfacher:
/* Level 0 */
h1 {
font-size: 30px;
}
/* Level 1 */
:is(section, article, aside, nav) h1 {
font-size: 25px;
}
/* Level 2 */
:is(section, article, aside, nav) :is(section, article, aside, nav) h1 {
font-size: 20px;
}
/* Level 3 */
:is(section, article, aside, nav)
:is(section, article, aside, nav)
:is(section, article, aside, nav)
h1 {
font-size: 15px;
}
:is() wählt keine Pseudoelemente aus
Die :is()-Pseudoklasse stimmt nicht mit Pseudoelementen überein. Stattdessen verwenden Sie:
some-element:is(::before, ::after) {
display: block;
}
oder dies:
:is(some-element::before, some-element::after) {
display: block;
}
stattdessen:
some-element::before,
some-element::after {
display: block;
}
Spezifikationen
| Spezifikation |
|---|
| Selectors Level 4 # matches-pseudo |
Browser-Kompatibilität
Siehe auch
:where()- Wie:is(), aber mit 0 Spezifität.- Selektorenliste
- Web-Komponenten