Zur Startseite

CSS Shorts: :has()

Die CSS :has() Pseudo-Klasse wird oft als der lang erwartete „Elternselektor“ in CSS bezeichnet, sodass Entwickler Elemente basierend auf ihren Kindern oder Geschwistern stylen können.

Was ist :has()?

CSS-Selektoren fließen traditionell nach unten: man kann Kinder, Nachkommen oder Geschwister auswählen, aber nicht den Elternteil selbst. Die :has() Pseudo-Klasse, die in der CSS Selectors Level 4-Spezifikation eingeführt wurde, ändert dieses Verhalten. Es ermöglicht Entwicklern, ein Element auszuwählen, wenn es bestimmte Elemente enthält oder davon gefolgt wird, was CSS viel flexibler und leistungsfähiger macht. Die :has() Pseudo-Klasse ist seit Dezember 2023 Baseline (funktioniert in den neuesten Browserversionen).

Die Pseudo-Klasse :has() ist ein relationaler Selektor. Sie trifft auf ein Element zu, wenn der relative Selektor in ihren Klammern mindestens ein Element findet, das an dieses Element gebunden ist. Anders ausgedrückt ermöglicht sie es, ein Eltern- oder Geschwisterelement basierend auf dem Vorhandensein bestimmter Kinder oder Nachbarelemente zu stylen.

Beispiele

Styling der Eltern:

div:has(p) {
  background-color: lavender;
}

Diese Regel wendet einen Lavendel-Hintergrund auf alle <div> an, die ein <p>-Element enthalten.

<figure>
    <img src="/images/thumb.jpg" alt="" />
    <figcaption>Three swallows</figcaption>
</figure>
<figure>
    <img src="/images/thumb.jpg" alt="Three swallows" />
</figure>
img {
    border-radius: 8px;
}
figure:has(figcaption) {
    padding: .5rem;
    background-color: #fff;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

Wenn das Figure-Element eine Beschriftung (figcaption) enthält, bekommt es einen weißen Hintergrund und einen Schatten. Ein Figure-Element ohne Bildunterschrift zeigt nur das Bild mit abgerundeten Ecken an.

Zwei Figure-Elementen, eins mit figcaption
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.grid:has(> :last-child:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
}

In diesem Beispiel haben wir ein Raster mit drei Spalten (es kann ein Blog-Layout oder das Beiträge-Modul sein). Wenn nur zwei Artikel veröffentlicht sind, werden im Raster weiterhin drei Spalten angezeigt. Mit :has() können wir die Anzahl der Elemente innerhalb des Rasters abfragen und die Anzahl der Spalten dementsprechend anpassen.

Styling je nach Geschwister

h2:has(+ p) {
    border-block-end: 2px solid crimson;
}

Diese Regel stylt alle <h2>-Elemente, die unmittelbar von einem <p> gefolgt werden.

Mit :not() kombinieren

div:has(:not(h2, h3)) {
 background-color: lightblue;
}

Jedes <div>, die etwas enthält, das nicht ein <h2> oder ein <h3> ist, bekommt einen hellblauen Hintergrund.

div:not(:has(.featured)) {
 background-color: #ff7e5f;
}

Diese Regel stylt alle <div>, die kein Element mit der Klasse .featured enthält.

Fazit

:has() ist eine sehr leistungsfähige Pseudo-Klasse, die das CSS-Styling auf eine neue Ebene bringt. Weitere Erklärungen und Beispiele findest du unter den folgenden Links.

Weiterführende Informationen:

:has()

:has() | CSS-Tricks

CSS :has() Interaktiver Leitfaden

Erkunden der :has() Pseudo-Klasse in CSS

Dieser Artikel basiert auf einem im Joomla Magazine bereits erschienenen Beitrag CSS Shorts: :has()

Mastodon