:has() – sag uns Vorfahre, hast du die richtigen Nachkommen?
Wenn dieser Abschnitt einen farbigen Hintergrund zeigt, hat der :has()-Selector Einzug gehalten. Damit wären die Selektoren um die (Königs-)Pseudoklasse des Vorfahren- oder Parent-Selectors bereichert.
Wenn das section-Element ein Element mit class="ivory" enthält, wird sein Hintergrund hellgelb.
<section> <h2 class="ivory">:has() – sag uns, wer ist dein Vorfahre?</h2> … </section>
section:has(h2.ivory) { background: ivory }
Wir können jetzt also CSS gezielt einsetzen, je nachdem was innerhalb eines Elements sitzt.
Browser-Support für :has
Aktuell unterstützen Safari und Chrome (ab Version 105)/Edge :has(), Firefox 120 hingegen noch nicht. Firefox soll ab Version 121 dabei sein.
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 kann die Kind-Elemente eines übergeordneten Containers zählen.
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
: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.