CSS/Selektoren/has

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

Die W3C-Spezifikation Selectors Level 4 hat bis 2013 an Stelle der :has() Pseudoklasse eine andere Notation verwendet: Den Subjekt-Indikator, dargestellt durch ein Ausrufezeichen. Er sollte in einem Selektor anzeigen, welches Element in einer Folge von Kombinatoren dasjenige sein sollte, für das die in der Regel aufgeführten Eigenschaften gelten sollten.

Syntax	:has(selektorliste)
Browsersupport	Details: caniuse.com

Beispiel

<style>

   ol > li:only-child {
      background-color: red; 
   }

   !ol > li:only-child {         /* Syntax der alten Spezifikation als Vergleich */
      background-color: red; 
   } 

   ol:has(> li:only-child) {     /* Gültige Spezifikation */
      background-color: red; 
   }

</style>

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

Der Selektor der ersten Regel repräsentiert ein Listenelement li, das das einzige Kind einer ol ist. Die Eigenschaft background-color:red wird nur für das Listenelement gesetzt, der Padding-Bereich der Liste und die Nummer des Listenelementes sind nicht betroffen.

Der Selektor der zweiten Regel ist veraltet, das Ausrufezeichen sollte anzeigen, dass die Eigenschaften der Regel für das ol Element gesetzt werden sollen.

In der dritten Regel wird die aktuelle Syntax verwendet. Hier wird deutlicher gemacht, dass die Eigenschaften der Regel für ein ol Element gelten sollen, das bestimmte Zusatzeigenschaften (nämlich: enthält ein li, dass einziges Kind ist) erfüllt. Die Regel färbt den Hintergrund der Liste vollständig rot.

Beachten Sie: Aus Performancegründen ist diese Pseudoklasse kein Teil des live profile der CSS Selektoren (Stand: Februar 2021) und wird von keinem Browser implementiert.

Siehe auch

• W3C: Selectors Level 4: The Relational Pseudo-class :has()]
• MDN: has
• caniuse: :has() CSS relational pseudo-class
• css-tricks: Did You Know About the :has CSS Selector? von Robin Rendle, 17.03.2021