CSS/Selektoren/has()

Browserunterstützung
caniuse.com

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)

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, seit Dezember 2023 auch im Firefox verfügbar.

Siehe auch

• Selektoren in CSS
  • Logische Pseudoklassen
    Eltern nach Kindern stylen mit :has()/wiki/Selektoren_in_CSS/Logische_Pseudoklassen#Eltern_nach_Kindern_stylen_mit_:has.28.29

Weblinks

• 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
• css-tricks: Meet `:has`, A Native CSS Parent Selector
• Browser-Support: caniuse.com