CSS-Pseudoklasse :has() – CSS Parent-Selector

Mit dem CSS-Selektor :has() können Elemente in CSS abhängig von der Anwesenheit untergeordneter oder direkt nachfolgender Elementen angesprochen werden. Die Pseudoklasse kann als »Parent Selector« verwendet werden, ermöglicht aber auch deutlich komplexere Abhängigkeiten. Dadurch ist es möglich, Styling in sehr bestimmten Konstellationen auf Elemente anzuwenden.

Syntax von CSS :has

Die relationale Pseudoklasse :has() besteht aus den folgenden Teilen:

<target>:has(<selector>) { /* … */ }

<target> ist der Selektor für das Element, auf das zugegriffen wird, wenn die als Argument übergebene Bedingung erfüllt ist. <selector> ist die mittels CSS-Selektor definierte Bedingung, die erfüllt sein muss, damit Styles auf den Selektor angewendet werden. Die als Argumente verwendeten Selektoren verhalten sich relativ zum Zielselektor. Mehrere Selektoren können kommasepariert angegeben werden.

:has() ist als »Parent Selector« nur unzureichend beschrieben, denn wie bei den meisten Pseudoklassen können Selektoren verkettet werden, so dass sowohl untergeordnete als auch benachbarte Elemente des Zielelements als Bedingung verwendet werden können.

Anwendungsbeispiele

In der einfachsten Ausführung wird :has() als »Parent Selector« verwendet, da hier ein übergeordnetes Element (Elternelement) angesprochen wird, wenn es bestimmte untergeordnete Elemente (Kindelemente) beinhaltet.

/* Spricht <figure>-Elemente an, die <figcaption> als untergeordnetes Element enthalten */
figure:has(figcaption) { /* … */ }

/* Spricht <section>-Elemente an, die <h1>-, <h2>- oder <h3>-Elemente enhalten */
section:has(h1, h2, h3)) { /* … */}

Durch die Verwendung von > und + lassen sich auch direkte Kind- und Geschwisterelemente ansprechen. Außerdem können Kindelemente in Abhängigkeit von anderen Kindelementen ausgewählt werden.

/* Spricht <a>-Elemente an, die direkt ein <img>-Element enthalten */
a:has(> img) { /* … */ }

/* Spricht <p>-Elemente an, auf die ein <img>-Element folgt */
p:has(+ img) { /* … */ }

/* Spricht <img>-Elemente an, die einem <figure>-Element untergeordnet sind, welches ein <figcaption>-Element enthält */
figure:has(figcaption) img { /* … */ }

Anhand dieser kurzen Beispiele wird deutlich, wie vielseitig und nützlich die Pseudoklasse :has() ist. In Kombination mit anderen Pseudoklassen wie :not() oder vielschichtigeren Konstellationen können komplexe relationale Selektoren erstellt werden, die ein sehr zielgerichtetes Styling ermöglichen.

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-has feature across the major browsers from caniuse.com

Geschrieben von:

Konstantin Hanke

Benutzerbild

Konstantin arbeitet als Webentwickler bei kulturbanause. Seine Hauptaufgabe ist die technische Umsetzung von klaren, soliden und effizienten Webauftritten und Website-Komponenten. Darüber hinaus kümmert er sich um die Wartung, Optimierung und Weiterentwicklung von bestehenden Websites. Sein besonderes Interesse gilt der Idee von quelloffener, freier Software.

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

Feedback & Ergänzungen – 1 Kommentar

  1. Skeptiker
    schrieb am 11.05.2022 um 09:06 Uhr:

    Wenn man nicht mehr weiß, was man schreiben soll, schreibt man über die has-Pseudoklasse. ;)
    Tolle Sache, wenn sie denn endlich mal in allen modernen Browsern implementiert und nutzbar wäre. Die Spezifikation dazu gibt’s schon lange (ist nächstes Jahr nicht runder Geburtstag?), nur wollen die Browserhersteller anscheinend nicht damit weiterkommen.

    Antworten

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