Der :has()-Selector in CSS
Der :has()-Selector für CSS wurde erstmals im März 2022 mit Safari 15.4 in einen Browser implementiert. Ende August wurde er mit der Version 105 von Chrome in allen Chromium-Browsern hinzugefügt und seit Dezember 2023 ist er mit Firefox 121 endlich auch in dieser Produktlinie verfügbar. Damit können wir Webentwickler ihn fest in unser Repertoire an Lösungen aufnehmen.
Was erlaubt der :has()-Selector überhaupt?
Er ermöglicht das einfache Styling eines untergeordneten oder nachfolgenden Elements in Abhängigkeit von dessen Inhalt. Wir stellen Dir hier verschiedene Einsatzmöglichkeiten vor.
Card mit optionaler Subheadline
Ein beliebtes Beispiel ist die Card, die eine Headline sowie eine optionale Subheadline besitzt. Der Abstand zwischen dem letzten Teil der Headline bzw. der Subheadline und dem Teaser-Text soll immer identisch sein. Aber der Abstand zwischen der Headline und Subheadline soll geringer sein. Im CSS erhalten sowohl Headline als auch Subheadline den gleichen Abstand nach unten.
Für den Fall, dass eine Card keine Subheadline besitzt, wird definiert folgender Selektor definiert:
.__card:has(.__subtitle) .__headline { margin-bottom: 0.25rem; }
Ohne Subheadline bleibt der Abstand nach der Headline groß. Im Falle einer Subheadline wird der Abstand auf die hier festgelegt Größe reduziert.
Beispiel einer Card, die, falls es eine Subheadline gibt, den Abstand erhöht
Galerie mit Hover-Effekt
Eine weitere Möglichkeit für den Einsatz des :has()-Selectors ist eine Galerie mit Hover-Effekt der enthaltenen Items.
Hier wird das aktuell gehoverte Elemente hervorgehoben, während alle anderen Elemente der Galerie sich ebenfalls verändern. In diesem Beispiel werden die Elemente in der Galerie beim hovern vergrößert..__gallery:has(.__image:hover) .__image:hover { scale: 1.2; }
Während alle anderen Elemente, die nicht gehovert werden, grau werden..__gallery:has(.__image:hover) .__image:not(:hover) { filter: grayscale(1); }
Beispiel einer Galerie, die den :has()-Selector für den Hover-Effekt verwendet
:has()-Selector im Javascript
Es ist auch möglich, den :has()-Selector im Javascript zu nutzen, um z. B. alle Elemente zu selektieren, die eine bestimmte Eigenschaft nicht besitzen.
Beispiel für die Selektion:const questions = document.querySelectorAll('.post:not(:has(blockquote))');
An den oben gezeigten Beispielen kann man gut erkennen, dass der :has()-Selektor uns Programmierern einige Herausforderungen im Frontend abnimmt, über die wir uns manchmal den Kopf zerbrechen und zusätzliches JavaScript schreiben mussten, um die Wünsche der Kunden und Designer umzusetzen.
