Besuchen Sie unseren Adventskalender 2022!
CSS/Selektoren/has
Aus SELFHTML-Wiki
< CSS | Selektoren
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>
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.
Liste der CSS-Selektoren
- Pseudoklassen
- einfache Selektoren
- Kombinatoren
- Pseudoelemente
li
, das das einzige Kind einerol
ist. Die Eigenschaftbackground-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
In der dritten Regel wird die aktuelle Syntax verwendet. Hier wird deutlicher gemacht, dass die Eigenschaften der Regel für einol
Element gesetzt werden sollen.ol
Element gelten sollen, das bestimmte Zusatzeigenschaften (nämlich: enthält einli
, dass einziges Kind ist) erfüllt. Die Regel färbt den Hintergrund der Liste vollständig rot.