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

Diese scheinbar kleinen Ergänzungen zur CSS-Auswahlsyntax werden große Auswirkungen haben.

Adam Argyle

Beim Erstellen von CSS-Code kann es manchmal zu langen Selektorlisten kommen, um mehrere Elemente mit denselben Stilregeln auszurichten. Wenn Sie beispielsweise alle <b>-Tags in einem Überschriftenelement farblich anpassen möchten, können 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 Selektorvorteile sind nur ein Teil des Mehrwerts, den :is() und :where() für CSS bieten. In diesem Beitrag erfahren Sie mehr über die Syntax und den Wert dieser beiden funktionalen Pseudo-Selektoren.

Browserkompatibilität

:is()

:where()

Treffen mit :is() und :where()

Dies sind funktionale Pseudoklassen-Selektoren. Beachten Sie das () am Ende und die Art und Weise, wie sie mit : beginnen. Stellen Sie sich diese als dynamische Funktionsaufrufe zur Laufzeit vor, die Elemente abgleichen. 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 mit :is() in Bezug auf Gruppierungen möglich ist, ist auch mit :where() möglich. 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 Auswahlbeispiele 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“ in Learn CSS.

Kurzfassung

• :where() ist nicht spezifisch.
  :where() überschreibt alle Angaben in der Auswahlliste, die als Funktionsparameter übergeben werden. 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