Eine der häufigsten Herausforderungen beim Schreiben von CSS besteht darin, bestimmte Elemente auszuwählen, die sich in einer bestimmten Beziehung zu anderen Elementen auf der Seite befinden.
Obwohl CSS verschiedene Selektorarten unterstützt, gibt es Situationen, in denen die verfügbaren Optionen nicht ausreichen. In solchen Fällen kann das Verwenden des CSS-Selektors :has() nützlich sein.
Verwendung von :has() im CSS
Die :has()-Pseudo-Klasse wird verwendet, um ein Element auszuwählen, das ein anderes Element enthält, das den angegebenen Selektor erfüllt.
Dies ermöglicht es Ihnen, eine Regel zu definieren, die auf ein Element angewendet wird, das ein bestimmtes Child-Element enthält.
Der :has()-Selektor hat eine ähnliche Syntax wie der :not()-Selektor und verwendet Klammern, um den inneren Selektor zu umschließen.
Hier ist ein Beispiel, wie Sie :has() verwenden können, um alle Links auszuwählen, die sich innerhalb eines Elements mit der Klasse “.container” befinden:
.container:has(a) {
color: red;
}In diesem Beispiel wird die Farbe aller Links innerhalb des Elements mit der Klasse .container auf rot gesetzt. Wenn es keine Links innerhalb des Elements gibt, wird die Regel nicht angewendet.
Sie können auch :has() mit anderen Selektoren kombinieren, um komplexere Regeln zu erstellen. Hier ist ein Beispiel, wie Sie :has() verwenden können, um alle Artikel auszuwählen, die mindestens einen Absatz enthalten, der ein Bild enthält:
article:has(p img) {
border: 1px solid black;
}In diesem Beispiel wird ein 1-Pixel-Rahmen um alle Artikel mit einem Absatz, der ein Bild enthält, angezeigt.
Browser-Unterstützung für :has()
Es ist jedoch wichtig zu beachten, dass :has() nicht von allen Browsern unterstützt wird. Derzeit wird es nur von einigen Browsern wie Firefox und Safari unterstützt.
Wenn Sie also :has() verwenden möchten, stellen Sie sicher, dass es in den von Ihnen verwendeten Browsern unterstützt wird, oder planen Sie alternative Lösungen.
Fazit
Insgesamt kann :has() eine sehr nützliche Möglichkeit sein, um komplexe Selektionsanforderungen zu erfüllen. Verwenden Sie es jedoch mit Vorsicht und stellen Sie sicher, dass es in den von Ihnen verwendeten Browsern unterstützt wird.
