Pseudo Klasse :has

CSS :is :where

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.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

:has() – sag uns, wer ist dein Vorfahre?

Wenn der Hintergrund dieses Abschnitts hellgelb ist, hat der :has()-Selector Einzug gehalten. Damit wären die Selektoren um die (Königs-)Pseudoklasse des Vorfahren- oder Parent-Selectors bereichert.

parent:has(child) {

}

Aktuell wird :has() nur von Safari unterstützt.

<section>
	<h2 class="ivory">:has() – sag uns, wer ist dein Vorfahre?</h2>
	…
</section>
section:has(h2.ivory) {
	background: ivory
}

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.

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