:has() CSS-Pseudoklasse
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
Die funktionale :has() CSS Pseudoklasse repräsentiert ein Element, wenn einer der als Argument übergebenen relativen Selektoren mindestens ein Element trifft, wenn er gegen dieses Element verankert ist. Diese Pseudoklasse bietet eine Möglichkeit, ein Elternelement oder ein früheres Geschwisterelement in Bezug auf ein Referenzelement auszuwählen, indem es eine relative Selektorliste als Argument verwendet.
/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */
h1:has(+ p) {
margin-bottom: 0;
}
Die :has() Pseudoklasse übernimmt die Spezifität des spezifischsten Selektors in ihren Argumenten auf die gleiche Weise wie :is() und :not().
Syntax
:has(<relative-selector-list>) {
/* ... */
}
Wenn die :has() Pseudoklasse selbst in einem Browser nicht unterstützt wird, schlägt der gesamte Selektorblock fehl, es sei denn, :has() befindet sich in einer nachsichtigen Selektorliste, wie in :is() und :where().
Die :has() Pseudoklasse kann nicht innerhalb einer anderen :has() verschachtelt werden.
Pseudoelemente sind auch keine gültigen Selektoren innerhalb von :has() und Pseudoelemente sind keine gültigen Anker für :has(). Dies liegt daran, dass viele Pseudoelemente bedingt basierend auf dem Styling ihrer Vorfahren existieren und es zu zyklischen Abfragen führen kann, wenn diese durch :has() abgefragt würden.
Beispiele
Auswahl eines Elternelements
Sie suchen möglicherweise nach einem "Eltern-Kombinator", der es Ihnen ermöglicht, den DOM-Baum aufwärts zu gehen und das Elternelement eines bestimmten Elements auszuwählen. Die :has() Pseudoklasse erledigt dies, indem sie parent:has(child) (für jedes Elternelement) oder parent:has(> child) (für direktes Elternelement) verwendet. Dieses Beispiel zeigt, wie ein <section> Element gestaltet wird, wenn es ein Kind mit der Klasse featured enthält.
<section>
<article class="featured">Featured content</article>
<article>Regular content</article>
</section>
<section>
<article>Regular content</article>
</section>
section:has(.featured) {
border: 2px solid blue;
}