:has() – sag uns Vorfahre, hast du die richtigen Nachkommen?
Der :has-Selektor erlaubt CSS-Stile abhängig vom Inhalt eines Elements und bereichert CSS um die (Königs-)Pseudoklasse des Vorfahren- oder Parent-Selectors.
In einem dynamischen Navigationsmenü stellt :has z.B. fest, ob ein Menü-Element ein Untermenü enthält (Browser, die :has nicht unterstützen, zeigen kein vorangestelltes ▶-Zeichen).
<ul class="hasmenu"> <li> Home </li> <li> Blog <ul> <li> Tipps </li> … </ul> </li> <li> Kosten <ul> <li> Entwicklung </li> … </ul> </li> … </ul>
ul.hasmenu ul {
max-height: 0;
overflow: hidden;
}
ul.hasmenu li:has(ul)::before {
content: "▶";
}
ul.hasmenu li:has(ul)::before liest sich »Wenn ein li-Element unterhalb von ul.hasmenu ein weiteres ul-Element enthält, dann setze ▶ als Zeichen, dass hier mehr zu holen ist».
Browser-Support für :has
Safari und Chrome (ab Version 105)/Edge unterstützen :has() seit Ende 2022, Firefox ist erst seit Ende 2023 mit Version 121 dabei.
Einen grünen Rahmen bekommen nur figure-Elemente, die ein figcaption-Element enthalten. Der Selektor ändert die Darstellung des figure-Elements – darum wird der :has()-Selektor als "Parent Selector" oder Eltern-Selektor gehandelt.
figure:has(figcaption) {
border: 2px solid green;
}
Ein Beispiel für die Anwendung des :has-Selektors ist eine Karte mit Bild oder ohne Bild oder die Liste von Blog-Kurzbeschreibungen – mal mit Bild, mal ohne Bild.
-
Fischerkahn Rees liegt am unteren Rhein und gehört zum Regierungsbezirk Düsseldorf.
Moers liegt am unteren Niederrhein und gehört zum Kreis Wesel.
Hier in Moers haben die Römer, die Oranier, sogar die Spanier und die Preußen Spuren hinterlassen.
-
Gartenmauer Was unsere Mütter widerstrebend weggeworfen haben, holen wir uns in Retroläden wieder zurück.
li:has(figure) {
display: flex;
gap:10px;
}
Das liest sich: Wenn das li-Element ein figure-Element enthält, erhält es den CSS-Stil display: flex und rendert den Text neben dem Bild. Browser, die :has() noch nicht unterstützen, rendern den Text unter dem Bild.
Elemente mit CSS :has zählen
Mit :has() holt CSS ein weiteres Umfeld, das bislang Javascript vorbehalten war: :has zählt die Kind-Elemente eines übergeordneten Blocks.
Wenn ein Element der Klasse .block-columns zwei Kind-Elemente hat, ist sein Hintergrund dunkelgrau. Mit drei Kind-Elementen ist der Hintergrund mittelgrau, mit vier Kind-Elementen hellgrau.
.block-columns:has(.block-column:nth-child(2)) {
background: #888;
}
.block-columns:has(.block-column:nth-child(3)) {
background: #bbb;
}
.block-columns:has(.block-column:nth-child(4)) {
background: #eee;
}
Idee von Parents counting children in CSS.
Das CSS für das dynamische Menü oben (das klassisch aus ul mit li-Elementen besteht) zählt die li-Elemente und verteilt sie automatisch.
- Home
- Blog
- Tipps
- Technik
- Layout
- Kosten
- Entwicklung
- Sichern, Pflegen, Erweitern
- Datenschutz
- Impressum
ul.counter:has(li:nth-child(5)) li {
background: cornflowerblue;
width: 18%;
padding:6px;
}
Der andere Zähler für die Anzahl von Elementen ist CSS counter, der allerdings auf die sichtbare gerenderte Anzeige eine Index bzw. Ordnungszahl ausgerichtet ist.
:not-Selektor
Der :not()-Selector ist sozusagen das Gegenstück zu :has(). Anders als :has wird :not bereits von allen modernen Browsern unterstützt.
Pseudo-Klassen vs Pseudo-Elemente
Pseudo-Klassen (einfacher Doppelpunkt) beschreiben einen Zustand eines Elements und können mit anderen CSS-Selektoren kombiniert werden, um Zustände sichtbar in die Webseite zu tragen. Das gängigste Beispiel ist ein :hover, das die Darstellung eines Links ändert, wenn der Benutzer die Maus über einem Element bewegt.
Pseudo-Elemente (doppelter Doppelpunkt) sprechen Teile eines Elements ohne HTML-Markup an, z.B. die erste Zeile eines Absatzes (::firstLine) und können Elemente ohne HTML-Markup einfügen (::before, ::after) oder einfach nur stylen (::marker – die Marker-Box von Listen). Sie können nicht inline in einem style-Attribut vereinbart werden und nur am Ende der Selektor-Kette stehen.