Die Pseudoklassen is() und where()

Flexbox und CSS-Grid revolutionierten unseren Umgang mit dem Layout, schufen neue Möglichkeiten. Die Einführung der drei Pseudoklassen :where(), :is() und :has() packe ich in eine ähnliche Kategorie. Diese neuen Pseudoklassen können unsere Codebasis erheblich verschlanken und unseren Code lesbarer machen. Schauen wir uns die ersten beiden einmal in Beispielen an.

Früher schrieben wir beispielsweise:

.teaser > header,
.teaser > footer,
.teaser > h2 {
	color: red;
}

Das geht jetzt folgendermassen kürzer:

.teaser > :is(header, footer, h2) {
	color: red;
}
/* ==== oder ==== */
.teaser > :where(header, footer, h2) {
	color: red;
}

Das ist doch schon eine große Ecke lesbarer.

Beide Pseudoklassen werden prinzipiell identisch genutzt. Aber sie haben unterschiedliche Auswirkungen auf die Spezifität einer Regel. Die Pseudoklassen selber besitzen keine Spezifität. :where() setzt jegliche Spezifität innerhalb des Klammerausdrucks auf 0. Bei :is() wird die größte Spezifität innerhalb der Klammer genommen. Schauen wir uns ein Beispiel an:

/* 0,1,1 */
ul[class] { color: red; }

/* 0,1,1 */
:is(ul[class]) { color: red; }

/* 0,0,0 */
:where(ul[class]) { color: red; }

/* ==== böser Trick :-) */
/* 1,0,0 */
:is(ul[class], #michGibtEsNicht) { color: red; }

Weitere interessante Beispiele sind:

:is(h1, h2, h3) {
	color: green;
}
:where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
    overflow-wrap: break-word;
}
:where(button) {
  all : unset;
}