Neue CSS-Funktionen für Pseudoklassen-Selektoren :is() und :where()

Diese scheinbar kleinen Ergänzungen der CSS-Selektorsyntax werden eine große Wirkung haben.

Adam Argyle

Beim Erstellen von CSS-Code kann es manchmal zu langen Selektorlisten kommen, wenn mehrere Elemente mit denselben Stilregeln ausgerichtet werden sollen. Wenn Sie beispielsweise die Farbe für alle <b>-Tags innerhalb eines heading-Elements anpassen möchten, könnten Sie Folgendes schreiben:

h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}

Stattdessen können Sie :is() verwenden, um die Lesbarkeit zu verbessern und eine lange Auswahl zu vermeiden:

:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

Lesbarkeit und kürzere Auswahlmöglichkeiten sind nur ein Teil des Werts, den :is() und :where() in CSS einbringen. In diesem Beitrag erfahren Sie mehr über die Syntax und den Wert dieser beiden funktionalen Pseudoselektoren.

Browserkompatibilität

:is()

:where()

Treffen mit :is() und :where()

Dies sind funktionale Pseudoklassenselektoren. Beachten Sie das () am Ende und wie sie mit : beginnen. Stellen Sie sich diese als dynamische Laufzeitfunktionsaufrufe vor, die mit Elementen übereinstimmen. Beim Erstellen von CSS können Sie damit Elemente in der Mitte, am Anfang oder am Ende eines Selektors gruppieren. Sie können auch die Spezifität ändern, sodass Sie sie aufheben oder erhöhen können.

Auswahlgruppierung

Alles, was :is() in Bezug auf die Gruppierung tun kann, auch :where(). Sie können sie überall in der Auswahl verwenden, verschachteln und stapeln. Die volle Flexibilität von CSS, die Sie bereits kennen und schätzen. Hier einige Beispiele:

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

Jedes der obigen Selektorbeispiele zeigt die Flexibilität dieser beiden funktionalen Pseudoklassen. Bereiche in Ihrem Code, in denen :is() oder :where() von Vorteil sein könnten, finden Sie anhand von Selektoren mit mehreren Kommas und wiederholten Selektoren.

Einfache und komplexe Auswahlen mit :is() verwenden

Weitere Informationen zu Selektoren finden Sie im Modul „Selektoren“ in Learn CSS. Hier einige Beispiele für einfache und komplexe Auswahlen, die die Funktion veranschaulichen:

article > :is(p,blockquote) {
  color: black;
}

:is(.dark-theme.hero > h1) {
  font-weight: bold;
}

article:is(.dark-theme:not(main .hero)) {
  font-size: 2rem;
}

Bisher sind :is() und :where() syntaktisch austauschbar. Sehen wir uns an, worin sie sich unterscheiden.

Der Unterschied zwischen :is() und :where()

Was die Spezifität angeht, unterscheiden sich :is() und :where() stark. Weitere Informationen zur Spezifität finden Sie im Modul „Spezifizität“ auf Learn CSS.

Kurzfassung

• :where() ist nicht spezifisch.
  :where() überschreibt alle Spezifität in der Auswahlliste, die als Funktionsparameter übergeben wird. Dies ist eine einzigartige Auswahlfunktion.
• :is() übernimmt die Spezifizität der spezifischsten Auswahl.
  :is(a,div,#id) hat eine Spezifizitätsbewertung von 100 Punkten.

Die Auswahl des Elements mit der höchsten Spezifität aus der Liste war für mich nur dann ein Problem, wenn ich mich zu sehr auf die Gruppierung konzentriert habe. Ich konnte die Lesbarkeit immer verbessern, indem ich den Selektor mit hoher Spezifität in einen eigenen Selektor verschoben habe, wo er nicht so viel Einfluss hat. Hier ein Beispiel:

article > :is(header, #nav) {
  background: white;
}

/* better as */
article > header,
article > #nav {
  background: white;
}

Bei :where() warte ich darauf, dass Bibliotheken Versionen ohne Spezifikation anbieten. Der Wettbewerb um die Spezifität zwischen Autorenstilen und Bibliotheksstilen könnte bald ein Ende haben. Beim Erstellen von CSS-Code gäbe es keine Spezifität, mit der man konkurrieren müsste. CSS arbeitet schon seit einiger Zeit an einer solchen Gruppierungsfunktion. Sie ist da und es gibt noch viel zu entdecken. Viel Spaß beim Verkleinern von Stylesheets und Entfernen von Kommas.

Foto von Markus Winkler auf Unsplash