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 Schreiben von CSS kann es zu langen Selektorlisten kommen, auf die eine Ausrichtung mit denselben Stilregeln erstellt werden. Wenn Sie zum Beispiel die Farbe Wenn Sie alle <b>-Tags innerhalb eines Überschriftenelements anpassen, 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, der :is() und :where() werden in CSS übertragen. In diesem Beitrag erfahrt ihr mehr über die Syntax und den Wert dieser beiden funktionalen Pseudoselektoren.

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 Laufzeitfunktionsaufrufe vor, Match-Elementen. 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, mit denen Sie die Spezifizität aufheben oder erhöhen können.

Selektorgruppierung

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. Voll Sie kennen und schätzen die Ihnen vertraute CSS-Flexibilität. 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. Um Code-Bereiche zu finden, von denen Sie profitieren könnten :is() oder :where(), suchen Sie nach Selektoren mit mehreren Kommas und Selektoren Wiederholung.

Einfache und komplexe Selektoren mit :is() verwenden

Wenn Sie Ihr Wissen über Selektoren auffrischen möchten, sehen Sie sich das Modul „Selektoren“ in Learn CSS an. Hier sind ein paar Beispiele für einfache und komplexe Auswahlmöglichkeiten:

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. Es ist Zeit, sehen wir uns an, wie 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() weist keine Spezifität auf.
  :where() drückt alle Spezifität in die als Funktionsparameter übergebene Auswahlliste. 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 Wahl der höchsten Spezifität aus der Liste als ich mich zu sehr auf Gruppierungen gefreut habe. Ich konnte immer Sie können die Lesbarkeit verbessern, indem Sie die Auswahl mit hoher Spezifität in einen eigenen Selector verschieben auf die sie kaum Einfluss hatten. 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 zwischen Autorenstile und Bibliothek ein Ende haben könnte. 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