Pseudo-Klassen is und where

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

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. Jedes span-Element innerhalb von section- und main-Elementen und jedes Element mit der Klasse footer hat einen farbigen Hintergrund.

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

steht anstelle von

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

Aus langen Listen, wie wir ihnen bei Themes für den Gutenberg-Editor begegnen, wird

.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;
}

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

:is gleicht dem Nesting – Verschachteln – in SASS und ähnlichen CSS-Preprozessoren.

: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. Wenn also einer der Selektoren der Liste nicht zutrifft, treten die Eigenschaften der Liste nicht in Kraft.

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

: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ß 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. Bislang nur Safari.

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.