CSS/Selektoren/has

Der has()-Selektor ist eine Pseudoklasse und dient dazu, ein Element nur dann zu selektieren, wenn es Nachfahren-Elemente bzw. Geschwister-Elemente besitzt, auf die einer der innerhalb von :has() angegebenen relativen Selektoren zutrifft.

Syntax	:has(selektorliste)
Parameter	:has() erwartet eine fehlertolerante Selektorliste aus relativen Selektoren. Die Selektoren in der Liste werden einzeln mit dem Element, auf das :has() angewendet wird, kombiniert. Wenn eine dieser Kombinationen ein Element trifft, so ist die :has() Pseudoklasse zutreffend. Der Kombinator in einem relativen Selektor kann auch ein Geschwisterkombinator sein und damit Eigenschaften nachfolgender Geschwisterelemente abfragen.}}
Browsersupport	Details: caniuse.com

Beispiel

<style>

   ol > li:only-child {
      border: thin solid red; 
   }

   ol:has(> li:only-child) {
      border: thin solid blue; 
   }

</style>

<!-- später dann im Dokument -->
<ol>
   <li>Hallo Selfhtml</li>
</ol>

Der Selektor der ersten Regel trifft auf li-Elemente, die das einzige Kind einer <ol>-Liste sind. Die border-Eigenschaft wird für das Listenelement gesetzt, nicht für die Liste selbst, d.h. der Rahmen enthält den padding-Bereich der Liste nicht.

Die zweite Regel hingegen selektiert <ol>-Elemente, die ein <li>-Element als einziges Kind haben. Die hier gesetzte border-Eigenschaft umfasst die vollständige Liste, auch den padding-Bereich.

Im Ergebnis gibt es also einen blauen Rahmen und einen etwas eingerückten roten Rahmen.

Beachten Sie: :has() ist seit Mitte 2022 in vielen Browsern verfügbar. Im Firefox ist es zwar vorhanden, aber noch nicht ausgereift und muss über das Browser-Flag layout.css.has-selector.enabled aktiviert werden.