CSS Pseudo-Klassen is und where

CSS :is () – Kurzschrift für eine Liste von CSS-Selektoren

Eine :is()-Regel ist eine CSS-Funktion, die eine Gruppe von Selektoren in einer einzigen Selektoren-Kombination kapselt.

:is(section, article) {
  padding: 8px 12px; 
  border: 1px dotted silver;
}

Die Pseudo-Klasse :is() ist eine Liste von Selektoren in runden Klammern. Sie trifft auf jedes Element zu, das zu einem Eintrag der Liste passt.

Im folgenden Beispiel hat jedes span-Element innerhalb von section- und main-Elementen und jedes Element mit der Klasse footer einen farbigen Hintergrund.

:is(section, main, .footer) span {
    background-color: lavender;
}

:is() steht hier anstelle von

section span,
main span,
.footer span {
	background-color: lavender;
}

Lange Listen, denen wir bei Themes für den Gutenberg-Editor begegnen …

.entry .entry-content blockquote,
.entry .entry-content figure,
.entry .entry-content p,
.entry .entry-content pre,
.entry .entry-content ul,
.entry .entry-content ol,
.entry .entry-content h1,
.entry .entry-content h2 {
  max-width: 52rem;
  margin-left:auto;
  margin-right: auto;
}

werden übersichtlich:

.entry .entry-content :is(blockquote, figure, p, pre, ul, ol, h1, h2) {
	max-width: 52rem;
	margin-left:auto;
	margin-right: auto;
}

:is hat Parallelen zum relativ frisch angekommenen CSS nesting und auch zum Nesting – Verschachteln – in SASS und ähnlichen CSS-Preprozessoren.

:is()-Regel und Spezifität

In einer :is()-Regel wird die Spezifität der beteiligten Selektoren durch die Kombination aller enthaltenen Selektoren bestimmt. Enthält die :is()-Regel einen id-Selektor (der Selektor mit der höchsten Spezifität), bestimmt er das Gewicht aller enthaltenen Regeln.

/* :is()-Regel mit  id-Selektor */
:is(#extra, .simple) {
    color: blue;
    background: wheat;
    padding: 1rem;
}

#extra {
    font-size: 1.3rem; 
}
.simple {
	background: blue;
	font-family: Georgia, serif;
}

Weiterhin blauer Text auf weizenfarbigem Hintergrund, denn die :is() Regel enthält sowohl einen id- als auch einen class-Selektor. Der Hintergrund wird nicht Blau.

Aber die Schriftfamilie font-family: Georgia, serif wird übernommen, denn sie ist in der :is()-Funktion nicht aufgeführt.

CSS :where ()

:where () selektiert ebenfalls alle Elemente einer Liste, allerdings mit einem Gewicht oder CSS-Spezifität von 0, während :is() die Spezifität oder Genauigkeit des spezifischsten Selektors annimmt.

div.where.last span { color: green; }
div.is.last span { color: magenta; }

:is(div.is.first, div.is.sec, div.is.last) span {
	color: red;
}

:where(div.where.first, div.where.sec, div.where.last) span {
  color: orange;
}

Da CSS :where die geringste Spezifität hat, greift das vorangehende div.where.last span und nicht die Eigenschaft aus der :where-Liste.

div.is.last span hingegen wird durch die Liste überschrieben.

<p class="is first">Sachsendomus high noon officia, non <span>vegan maiscolbus colorius</span>.
<p class="is sec">Sachsendomus high noon officia, non <span>vegan maiscolbus colorius</span>.
<p class="is last">Sachsendomus high noon officia, non <span>vegan maiscolbus colorius</span>.
		
<p class="where first">Sachsendomus high noon officia, non <span>vegan maiscolbus colorius</span>.
<p class="where sec">Sachsendomus high noon officia, non <span>vegan maiscolbus colorius</span>.
<p class="where last">Sachsendomus high noon officia, <span>vegan maiscolbus colorius</span>.

CSS :has() – sag mal: Wer ist dein Vorfahre?

:has() macht sich auf den Weg, der lang ersehnte Vorfahren-Selektor oder Parent-Selektor zu werden. Wir scharren mit den Hufen …

elem:has(child) {
	
}

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

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

section:has(h2.ivory) {
	background: ivory
}

Nur ein section-Element, in dem ein Element mit der Klasse .ivory liegt, wird farbig hinterlegt. Lange Zeit nicht von Firefox unterstützt, seit Version 121 von FF sind jetzt alle modernen Browser auf dem Zug.

Pseudo-Klassen vs Pseudo-Elemente

Pseudo-Klassen (einfacher Doppelpunkt, z.B. a:hover) 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, z.B. a::before) 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.