Pseudo Klasse :has

CSS has-Selektor

Der :has()-Selektor trifft auf alle Elemente zu, die mindestens ein bestimmtes Element enthalten. Wenn ein Element z.B. zusätzlich ein Bild neben dem Text enthält, weist das CSS dem Element display: flex zu. Das macht den has-Selektor zum Eltern- oder Parent-Selektor.

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

:has() – sag uns Vorfahre, hast du die richtigen Nachkommen?

Der :has-Selektor erlaubt CSS-Stile abhängig vom Inhalt eines Elements und erweitert CSS um die Pseudoklasse des Vorfahren- oder Parent-Selectors.

  • Home
  • Blog
    • Tipps
    • Technik
    • Layout
  • Kosten
    • Entwicklung
    • Sichern, Pflegen, Erweitern
  • Datenschutz
  • Impressum

In einem dynamischen Navigationsmenü stellt :has 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.

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