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

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

Adam Argyle

Beim Schreiben von CSS kann es vorkommen, dass lange Selektorlisten verwendet werden, um mehrere Elemente mit denselben Stilregeln anzusprechen. Wenn Sie beispielsweise <b>-Tags innerhalb eines Überschriftenelements 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 gleichzeitig einen langen Selektor 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() für CSS bieten. In diesem Beitrag lernen Sie die Syntax und den Wert dieser beiden funktionalen Pseudoselektoren kennen.

Ein unendliches visuelles Bild vor und nach der Verwendung von :is()

Browserkompatibilität

:is()

Unterstützte Browser

  • 88
  • 88
  • 78
  • 14

Quelle

:where()

Unterstützte Browser

  • 88
  • 88
  • 78
  • 14

Quelle

:is() und :where() kennenlernen

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

Selektorgruppierung

Alles, was :is() in Bezug auf Gruppierung tun kann, genauso wie :where(). Dies beinhaltet die Verwendung an einer beliebigen Stelle im Selektor sowie das Verschachteln und Stapeln. Hohe CSS-Flexibilität, wie Sie sie 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. Um Bereiche in Ihrem Code zu finden, die von :is() oder :where() profitieren könnten, suchen Sie nach Selektoren mit mehreren Kommas und Selektorwiederholungen.

Einfache und komplexe Selektoren mit :is() verwenden

Weitere Informationen zu Selektoren finden Sie im Selektormodul auf Learn CSS. Hier sind einige Beispiele für einfache und komplexe Selektoren, die diese Fähigkeit 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. Jetzt wollen wir uns ansehen, wie sie sich unterscheiden.

Die Differenz zwischen :is() und :where()

Im Hinblick auf die Spezifität weichen :is() und :where() stark voneinander ab. Weitere Informationen zur Spezifität finden Sie im Spezifitätsmodul im Learn CSS.

Kurz zusammengefasst

  • :where() hat keine Spezifität.
    :where() rückt alle Spezifitäten in der Selektorliste zusammen, die als Funktionsparameter übergeben wird. Dies ist eine erste Auswahlfunktion seiner Art.
  • :is() verwendet die Spezifität des spezifischsten Selektors.
    :is(a,div,#id) hat den Spezifitätsfaktor einer ID, 100 Punkte.

Die höchste Spezifitätsauswahl aus der Liste zu übernehmen, war für mich nur ein Problem, als ich mich zu sehr für das Gruppieren bereit war. Ich konnte die Lesbarkeit immer verbessern, indem ich den Selektor mit hoher Spezifität in einen eigenen Selektor verschoben habe, wo er keine so großen Auswirkungen hatte. Hier ist ein Beispiel dafür, was ich damit meine:

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

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

Bei :where() warte ich darauf, dass Bibliotheken Versionen ohne Spezifität anbieten. Der Spezifitätswettbewerb zwischen Autoren- und Bibliotheksstilen könnte ein Ende haben. Beim Schreiben von CSS gibt es keine Spezifität, mit der man konkurrieren kann. Preisvergleichsportal arbeitet schon seit einiger Zeit an einer solchen Gruppierungsfunktion. Viel Spaß beim Erstellen kleinerer Stylesheets und Entfernen von Kommas.

Foto von Markus Winkler auf Unsplash