CSS, HTML und Javascript mit {stil}

Pseudo Klasse :has

CSS has-Selektor

Der :has()-Selektor trifft auf alle Elemente zu, mindestens ein bestimmtes Element enthalten, das in den Klammern des has-Selektors notiert ist. Das macht den has-Selektor zu einem Eltern- oder Parent-Selektor, der z.B. nur li-Elemente anspricht, die ein figure-Element enthalten.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

: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.

  • slideshow-fischer-490
    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.

  • slideshow-laterne-490
    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

dot :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.