CSS :is und :where Pseudoklassen-Selektor
Mit :is() und :where() könnt ihr zusammengesetzte CSS-Selektoren kürzer schreiben und habt mehr Kontrolle über die Spezifität.
Die Pseudoklassen :is() und :where() erlauben es zusammengesetzte CSS-Selektoren kürzer und einfacher zu schreiben. Damit erzeugt ihr mit nativem CSS und ohne Pre-Prozessor besser lesbaren CSS-Code, habt mehr Kontrolle über die CSS-Spezifität (Wertigkeit) der Selektoren und verbessert die Wartbarkeit eures Codes. Wir zeigen euch wie ihr diese Pseudoselektoren verwendet und was der Unterschied zwischen :is() und :where() ist.
Die Verwendung von :is() und :where()
Die Selektoren prüfen, ob das Element an seiner Bezugsposition zum Eltern-Selektor mit einem der Selektoren in seiner Selektoren-Liste übereinstimmt.
Kurz gesagt, anstatt zu schreiben:
.header a,
.header .button {
text-decoration: none;
}können wir folgendes schreiben:
.header :is(a, .button) {
text-decoration: none;
}Die Verwendung erinnert an die verschachtelte Schreibweise in Sass. Allerdings mit zwei großen Vorteilen. Erstens ist kein Pre-Prozessor notwendig, um den Code, in vom Browser lesbares CSS, umzuwandeln. Zweitens ist der CSS-Code, den ein Pre-Prozessor erzeugt, natürlich genau der gleiche Code, den wir ohne die neuen Pseudoselektoren schreiben würden.
Spezifität
Hier kommen wir zum Unterschied zwischen :is() und :where(). Beide Pseudoselektoren werden auf die gleiche Weise verwendet. Der Unterschied ist aber, dass :where() immer eine Spezifität von 0 hat und damit sehr leicht überschrieben werden kann.
:is() hingegen nimmt die Spezifität des Selektors mit der höchsten Spezifität innerhalb der Selektoren-Liste an.
In folgendem Beispiel hat a immer eine Spezifität von 1.
.header a {
color: red;
}
.header :is(a, p) {
color: red;
}Steht ein, in diesem Fall, einfacher Selektor aber zusammen mit einem Selektor höherer Spezifität zusammen, übernimmt er dessen Spezifität. In folgendem Beispiel hat a also eine Wertigkeit von 100.
.header :is(#foo, a) {color: red; }
Das bedeutet in dem folgenden Beispiel ist der Link im Header blau.
.header :is(a) {
color: red;
}
.header a {
color: blue;
}In diesem Beispiel allerdings bleibt der Link rot.
.header :is(#foo, a) {
color: red;
}
.header a {
color: blue;
}Um dies zu verhindern, können wir :where() verwenden. Beachtet aber, dass dadurch die Wertigkeit sogar auf 0 runtergesetzt wird. Somit ergeben die beiden folgenden Varianten, dass der Link im Header blau ist.
.header :where(#foo, a) {
color: red;
}
.header a {
color: blue;
}.header a {
color: blue;
}
.header :where(#foo, a) {
color: red;
}Beim Verfassen dieses Artikels ist der Browsersupport von :is() noch wesentlich besser als :where(), was auf jeden Fall berücksichtigt werden sollte. Auch ist der Support für komplexe Selektoren noch sehr durchwachsen.
:matches() wurde umbenannt in :is()
Ältere Webbrowser unterstützen .is() als :matches() oder :any() – allerdings nur mit entsprechendem Vendor-Präfix. :any() unterstützt darüber hinaus keine komplexen Selektoren.
