{"id":5927,"date":"2024-07-15T10:21:20","date_gmt":"2024-07-15T08:21:20","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=5927"},"modified":"2024-07-15T10:21:20","modified_gmt":"2024-07-15T08:21:20","slug":"has-selector-css","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/has-selector-css\/","title":{"rendered":"Die Macht des :has()-Selectors in CSS: Mehr als nur ein Eltern-Selektor"},"content":{"rendered":"

Hey Webentwicklerinnen und Webentwickler! Habt ihr schon vom neuen :has()-Selector<\/strong> in CSS geh\u00f6rt? Wenn nicht, dann wird es h\u00f6chste Zeit, denn dieser kleine Helfer kann eure Stylesheets revolutionieren. Wir bei clickstorm nutzen :has()<\/strong> seit einiger Zeit aktiv und sind von dessen Funktionen vollkommen \u00fcberzeugt. In diesem Blogbeitrag werfen wir einen genaueren Blick auf den :has()-Selector<\/strong>, wie er funktioniert und welche praktischen Anwendungen er bietet. Macht euch bereit, denn das wird spannend!<\/p>\n

Was ist :has()?<\/h2>\n

Der :has()-Selector<\/strong> ist eine sogenannte „elternbasierte“ Pseudoklasse in CSS. Er erm\u00f6glicht es, ein Element zu stylen, wenn es bestimmte Nachkommenelemente enth\u00e4lt. Das ist besonders n\u00fctzlich, da CSS bisher keine M\u00f6glichkeit bot, Eltern auf Basis von Kindern zu stylen.<\/p>\n

Geschichte und Browserunterst\u00fctzung:<\/h2>\n

Der :has()-Selector<\/strong> wurde als Teil der CSS Selectors Level 4 Spezifikation eingef\u00fchrt. W\u00e4hrend diese Pseudoklasse schon seit einigen Jahren in der Spezifikation existiert, hat sie erst in j\u00fcngerer Zeit umfassende Unterst\u00fctzung in modernen Browsern erhalten. Seit Mitte 2021 wird :has()<\/strong> in Browsern wie Chrome, Edge und Safari vollst\u00e4ndig unterst\u00fctzt. Firefox unterst\u00fctzt :has()<\/strong> seit Version 103 offiziell, und seit Dezember 2023 ist der Support in der Version 119 nicht mehr experimentell\u200b (CSS-Tricks<\/a>)\u200b\u200b (Can I Use<\/a>)\u200b\u200b\u200b.<\/p>\n

Syntax und einfache Beispiele:<\/h2>\n

Die grundlegende Syntax von :has()<\/strong> ist einfach:<\/p>\n

element:has(selector) {\r\n  \/* Styles *\/\r\n}<\/pre>\n
Ein einfaches Beispiel w\u00e4re, ein div-Element zu f\u00e4rben, das ein Bild (img) enth\u00e4lt:<\/p>\n
div:has(img) {\r\n  background-color: red;\r\n}<\/pre>\n
Jeder div, der ein img-Element enth\u00e4lt, erh\u00e4lt hier einen roten Hintergrund.<\/p>\n
Fortgeschrittene Anwendungsf\u00e4lle:<\/h2>\n
    \n
  1. Formularvalidierung:<\/strong> Highlighten eines Formulars mit ung\u00fcltigen Eingaben:\n
    form:has(input:invalid) {\r\n  border: 2px solid red;\r\n}<\/pre>\n
    diese Regel sorgt daf\u00fcr, dass Formulare mit ung\u00fcltigen Eingaben einen roten Rahmen bekommen.<\/li>\n
  2. Interaktive UI-Komponenten:<\/strong> Visuelles Hervorheben eines Akkordeon-Elements, wenn es erweitert ist:\n
    .accordion:has(.expanded) {\r\n  background-color: lightblue;\r\n}<\/pre>\n
    Hier wird das Akkordeon blau gef\u00e4rbt, wenn ein Kind-Element die Klasse .expanded hat.<\/li>\n<\/ol>\n
    Kombination mit dem :not()-Selector:<\/h2>\n
    Der :has()-Selector entfaltet seine volle St\u00e4rke in Kombination mit anderen Selektoren, wie dem :not()-Selector. So k\u00f6nnt ihr Elemente stylen, die bestimmte Nachkommen nicht enthalten.<\/p>\n
    Beispiel:<\/strong> Ein div-Element hervorheben, das kein Bild enth\u00e4lt:<\/p>\n
    div:not(:has(img)) {\r\n  background-color: yellow;\r\n}<\/pre>\n
    In diesem Fall werden alle div-Elemente, die kein img-Element enthalten, gelb gef\u00e4rbt.<\/p>\n
    Ein weiteres praktisches Beispiel ist das Hervorheben von Listen (ul), die keine Listenelemente (li) enthalten:<\/p>\n
    ul:not(:has(li)) {\r\n  border: 2px dashed red;\r\n}<\/pre>\n
    Hier erhalten leere Listen einen gestrichelten roten Rahmen.<\/p>\n
    Performance und Browser-Support:<\/h2>\n
    Wie bereits erw\u00e4hnt, wird :has() von modernen Browsern wie Chrome, Edge und Safari unterst\u00fctzt. Firefox unterst\u00fctzt :has() seit Dezember 2023 ab Version 119 offiziell. Es ist wichtig, Fallback-Styles oder Polyfills zu verwenden, um die Kompatibilit\u00e4t mit \u00e4lteren Browsern sicherzustellen. Da der Selector komplexere Abfragen erm\u00f6glicht, kann dies zu Performance-Overhead f\u00fchren, besonders bei h\u00e4ufigem Einsatz oder komplexen Abfragen. Allerdings bietet die browserweite Unterst\u00fctzung seit 2023 eine solide Basis f\u00fcr den produktiven Einsatz in modernen Webprojekten\u200b (Can I Use<\/a>)\u200b\u200b.<\/p>\n
    Video-Empfehlung:<\/h2>\n
    F\u00fcr eine visuelle und detaillierte Erkl\u00e4rung des :has()-Selectors empfehlen wir dieses YouTube-Video, das die Funktion und Anwendungsm\u00f6glichkeiten hervorragend erl\u00e4utert:<\/p>\n
    \"Info<\/p>\n
    Dieses Video wird \u00fcber eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.<\/a><\/p>\n
    Einstellung vornehmen<\/a><\/div>\n