Die Macht des :has()-Selectors in CSS: Mehr als nur ein Eltern-Selektor
Hey Webentwicklerinnen und Webentwickler! Habt ihr schon vom neuen :has()-Selector in CSS gehört? Wenn nicht, dann wird es höchste Zeit, denn dieser kleine Helfer kann eure Stylesheets revolutionieren. Wir bei clickstorm nutzen :has() seit einiger Zeit aktiv und sind von dessen Funktionen vollkommen überzeugt. In diesem Blogbeitrag werfen wir einen genaueren Blick auf den :has()-Selector, wie er funktioniert und welche praktischen Anwendungen er bietet. Macht euch bereit, denn das wird spannend!
Was ist :has()?
Der :has()-Selector ist eine sogenannte „elternbasierte“ Pseudoklasse in CSS. Er ermöglicht es, ein Element zu stylen, wenn es bestimmte Nachkommenelemente enthält. Das ist besonders nützlich, da CSS bisher keine Möglichkeit bot, Eltern auf Basis von Kindern zu stylen.
Geschichte und Browserunterstützung:
Der :has()-Selector wurde als Teil der CSS Selectors Level 4 Spezifikation eingeführt. Während diese Pseudoklasse schon seit einigen Jahren in der Spezifikation existiert, hat sie erst in jüngerer Zeit umfassende Unterstützung in modernen Browsern erhalten. Seit Mitte 2021 wird :has() in Browsern wie Chrome, Edge und Safari vollständig unterstützt. Firefox unterstützt :has() seit Version 103 offiziell, und seit Dezember 2023 ist der Support in der Version 119 nicht mehr experimentell (CSS-Tricks) (Can I Use).
Syntax und einfache Beispiele:
Die grundlegende Syntax von :has() ist einfach:
element:has(selector) {
/* Styles */
}Ein einfaches Beispiel wäre, ein div-Element zu färben, das ein Bild (img) enthält:
div:has(img) {
background-color: red;
}Jeder div, der ein img-Element enthält, erhält hier einen roten Hintergrund.
Fortgeschrittene Anwendungsfälle:
- Formularvalidierung: Highlighten eines Formulars mit ungültigen Eingaben:
form:has(input:invalid) { border: 2px solid red; }diese Regel sorgt dafür, dass Formulare mit ungültigen Eingaben einen roten Rahmen bekommen.
- Interaktive UI-Komponenten: Visuelles Hervorheben eines Akkordeon-Elements, wenn es erweitert ist:
.accordion:has(.expanded) { background-color: lightblue; }Hier wird das Akkordeon blau gefärbt, wenn ein Kind-Element die Klasse .expanded hat.
Kombination mit dem :not()-Selector:
Der :has()-Selector entfaltet seine volle Stärke in Kombination mit anderen Selektoren, wie dem :not()-Selector. So könnt ihr Elemente stylen, die bestimmte Nachkommen nicht enthalten.
Beispiel: Ein div-Element hervorheben, das kein Bild enthält:
div:not(:has(img)) {
background-color: yellow;
}In diesem Fall werden alle div-Elemente, die kein img-Element enthalten, gelb gefärbt.
Ein weiteres praktisches Beispiel ist das Hervorheben von Listen (ul), die keine Listenelemente (li) enthalten:
ul:not(:has(li)) {
border: 2px dashed red;
}Hier erhalten leere Listen einen gestrichelten roten Rahmen.
Performance und Browser-Support:
Wie bereits erwähnt, wird :has() von modernen Browsern wie Chrome, Edge und Safari unterstützt. Firefox unterstützt :has() seit Dezember 2023 ab Version 119 offiziell. Es ist wichtig, Fallback-Styles oder Polyfills zu verwenden, um die Kompatibilität mit älteren Browsern sicherzustellen. Da der Selector komplexere Abfragen ermöglicht, kann dies zu Performance-Overhead führen, besonders bei häufigem Einsatz oder komplexen Abfragen. Allerdings bietet die browserweite Unterstützung seit 2023 eine solide Basis für den produktiven Einsatz in modernen Webprojekten (Can I Use).
Video-Empfehlung:
Für eine visuelle und detaillierte Erklärung des :has()-Selectors empfehlen wir dieses YouTube-Video, das die Funktion und Anwendungsmöglichkeiten hervorragend erläutert:
Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.
Fazit:
Der :has()-Selector bringt frischen Wind in die Welt des CSS und ermöglicht neue, spannende Möglichkeiten zur Gestaltung von Webseiten. Mit :has() könnt ihr effizienter und präziser stylen, was die Qualität und Wartbarkeit eurer Projekte erheblich verbessert. Probiert es aus und lasst euch von den neuen Möglichkeiten inspirieren! Wenn du weitere nützliche Anwendungsfälle von :has() kennst und teilen möchtest, schreibe uns gerne ein Kommentar.
Werde Teil unseres Teams
Hast du Lust auf spannende TYPO3-Projekte und möchtest in einem dynamischen Team arbeiten? Dann bewirb dich bei uns! Wir suchen immer talentierte Entwickler, die unsere Leidenschaft für hochwertige Webentwicklung teilen. Du brauchst keinen Lebenslauf – kontaktiere uns einfach direkt. Hier kannst du dich bewerben. Hier kannst du dich bewerben.
