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.

Geschrieben von:

Jonas Hellwig

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Felix Lehmann

Benutzerbild

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.

Raimund Büchner

Benutzerbild

Raimund ist oft die erste Ansprechperson bei kulturbanause. Er kümmert sich hauptsächlich um die Betreuung und Beratung unserer bestehenden als auch künftigen Kundschaft. Ein weiterer Schwerpunkt seiner Tätigkeit liegt im Design nicht unmittelbar sichtbarer Dinge: Struktur und Inhalte. Projekte unterstützt er daher vor allem in der Anfangsphase in Bereichen wie Informationsarchitektur, UX-Design und Content Strategy.

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.

Projekte mit kulturbanause

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

Design + Code

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.

Schulung + Beratung