Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Felix Lehmann

thumb

Felix arbeitet als Frontend-Entwickler und Web-Designer bei kulturbanause®. Sein Hauptaufgabenbereich umfasst die Erstellung von Layouts und Vektorgrafiken, Mikroanimationen und modularen Website-Komponenten. Sowohl beim Entwickeln eines Prototyps als auch bei der Umsetzung eines individuellen WordPress-Themes legt er großen Wert auf eine angepasste Darstellung über alle Geräteklassen und Bildschirme hinweg.

Feedback & Ergänzungen – Schreibe einen Kommentar

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: