T
css selectors has-selector is-selector web-development

Die Macht moderner CSS-Selektoren: :has, :is und :where

Meistern Sie die neue Generation von CSS-Selektoren. Erfahren Sie, wie :has() als Eltern-Selektor funktioniert und wie :is() und :where() Ihren Code vereinfachen.

2026-04-18

Die Macht moderner CSS-Selektoren: :has, :is und :where

Jahrelang haben CSS-Entwickler von einem „Eltern-Selektor“ geträumt – einer Möglichkeit, ein Element basierend auf seinen Kindern zu stylen. Außerdem kämpften wir mit langen, sich wiederholenden Selektorlisten, die unsere CSS-Dateien unnötig aufblähten.

Modernes CSS hat diese Wünsche endlich erfüllt. Mit der Einführung von :has(), :is() und :where() hat sich die Art und Weise, wie wir Selektoren schreiben, grundlegend geändert.

1. :has(): Der bahnbrechende „Eltern-Selektor“

Die Pseudoklasse :has() ist wohl die leistungsstärkste CSS-Ergänzung des letzten Jahrzehnts. Sie ermöglicht es Ihnen, ein Element auszuwählen, wenn es ein bestimmtes Kind enthält oder wenn ihm ein bestimmtes Geschwisterelement folgt.

Der „Eltern“-Anwendungsfall

/* Style die Card NUR, wenn sie ein Bild enthält */
.card:has(img) {
  display: flex;
  flex-direction: column;
}

/* Style die Card NUR, wenn sie ein „Featured“-Badge hat */
.card:has(.featured-badge) {
  border: 2px solid gold;
}

Der „bedingte“ Anwendungsfall

Sie können es sogar verwenden, um Labels basierend auf dem Status ihrer Inputs zu stylen:

/* Style das Label, wenn die Checkbox darin aktiviert ist */
.form-group:has(input:checked) label {
  color: green;
  font-weight: bold;
}

2. :is(): Komplexe Selektoren vereinfachen

Haben Sie jemals solchen Code geschrieben?

header h1, header h2, header h3, footer h1, footer h2, footer h3 {
  color: blue;
}

Die Pseudoklasse :is() ermöglicht es Ihnen, Selektoren zu gruppieren und Wiederholungen zu reduzieren:

:is(header, footer) :is(h1, h2, h3) {
  color: blue;
}

Kernmerkmal: Fehlertoleranz

Im Gegensatz zu herkömmlichen Selektorlisten ist :is() fehlertolerant (forgiving). Wenn ein Selektor in der Liste ungültig ist, ignoriert der Browser den ungültigen und wendet die Styles dennoch auf die gültigen an.

3. :where(): Die Kraft der Spezifität Null

Der :where()-Selektor funktioniert exakt wie :is(), jedoch mit einem entscheidenden Unterschied: Er hat eine Spezifität von Null.

Warum Spezifität wichtig ist

In CSS gewinnt der spezifischere Selektor. Dies führt oft zu „Spezifitätskriegen“, bei denen Entwickler !important oder lange Selektorketten verwenden, um Styles zu überschreiben.

/* Dies hat keinen Einfluss auf die Spezifität */
:where(.content) p {
  color: gray;
}

/* Ein einfacher Klassenselektor kann dies nun leicht überschreiben */
.special-p {
  color: red; /* Gewinnt, weil :where() keine „Gewichtung“ hinzugefügt hat */
}

:where() ist perfekt für CSS Resets und Library-Autoren, die Standard-Styles bereitstellen möchten, die für Benutzer leicht zu überschreiben sind.

4. Fortgeschrittenes :nth-child mit of S

Sie kennen wahrscheinlich :nth-child(even), aber wussten Sie, dass Sie die Auswahl jetzt mit dem Schlüsselwort of filtern können?

/* Wähle das 2. Element aus, aber NUR unter denen mit der Klasse .visible */
li:nth-child(2 of .visible) {
  background: yellow;
}

Dies ist unglaublich nützlich für dynamische Listen, in denen einige Elemente via display: none ausgeblendet sein könnten.

5. Spezifitäts-Rechner: Die Mathematik verstehen

Die CSS-Spezifität wird in drei Spalten berechnet: (A, B, C).

  • A: IDs
  • B: Klassen, Attribute und Pseudoklassen
  • C: Elemente und Pseudoelemente

Wie die neuen Selektoren dies beeinflussen:

  • :is() und :has(): Ihre Spezifität entspricht dem spezifischsten Selektor in ihrer Argumentliste.
  • :where(): Hat immer eine Spezifität von (0, 0, 0).

FAQ: Häufig gestellte Fragen

F: Wird :has() von allen Browsern unterstützt?

A: Ja! Seit Ende 2023 wird :has() in den neuesten Versionen von Chrome, Safari, Firefox und Edge unterstützt. Es ist sicher für den Einsatz in modernen Webprojekten.

F: Wann sollte ich :is() vs. :where() verwenden?

A: Verwenden Sie :is(), wenn die gruppierten Selektoren ihre normale Spezifität behalten sollen. Verwenden Sie :where(), wenn die Styles sehr leicht überschreibbar sein sollen (üblich bei Basis-Styles oder Resets).

F: Beeinflusst :has() die Performance?

A: Browser haben :has() signifikant optimiert. Während die hundertfache Verwendung auf einer Seite einen geringen Einfluss haben kann, ist es für die meisten UI-Patterns extrem schnell und effizient.

Sauberes, deklaratives CSS schreiben

Indem Sie diese Selektoren meistern, können Sie die Anzahl der „Utility“-Klassen in Ihrem HTML deutlich reduzieren und die Logik dort lassen, wo sie hingehört: in Ihrem CSS.

Möchten Sie sehen, wie schwer Ihre Selektoren gewichtet sind? Nutzen Sie unseren CSS Selector Specificity Calculator (demnächst verfügbar), um die Mathematik von CSS zu meistern.

Zurück zum Blog