Verwendung von :has() in CSS

Was ist :has() in CSS?

:has() ist ein CSS-Selektor der neuen Generation, der als „Elternselektor“ bezeichnet wird.
Er ermöglicht es, Elemente basierend darauf auszuwählen, was sich innerhalb oder in der Nähe von ihnen befindet.

Früher konnten wir in CSS Kind-Elemente auswählen (.card img {}), aber wir konnten den Elternteil nicht stylen, wenn darin etwas Bestimmtes ist. :has() löst dieses Problem.

Es kann in einigen Fällen als Ersatz für JS verwendet werden (zum Beispiel das Stylen des Elternteils, wenn ein Kind aktiv ist).

Syntax

element:has(selector) {
  /* Stile */
}
 

• element — das Element, auf das die Regel angewendet wird.
• selector — Bedingung, was sich innen befinden muss.

Echtes Beispiel

.article:has(h2, h3) {
  padding-top: 2rem;
}
 

Wenn im Artikel Unterüberschriften vorhanden sind, fügen wir zusätzlichen Abstand hinzu.

Syntax zur Verwendung von has() mit mehreren Bedingungen

In CSS kann :has() mit mehreren Bedingungen verwendet werden — dies ist eine mächtige Funktion, die CSS viel „intelligenter“ und kontextabhängiger macht. Die Unterstützung von :has() ist in den meisten modernen Browsern verfügbar.

Der Selektor :has() kann eine oder mehrere Bedingungen annehmen, die durch Kommas oder logische Operatoren getrennt sind:

ODER (A, B) — funktioniert wie “oder”

article:has(h1, h2) {   border: 1px solid red; }

Der Stil wird auf <article> angewendet, wenn darin entweder h1, oder h2 oder beide vorhanden sind.

UND (A:has(B):has(C)) — funktioniert wie “und”

Um mehrere Bedingungen gleichzeitig anzugeben, müssen :has() ineinander geschachtelt werden:

div:has(h1):has(p) {   background: lightgreen; }

Der Stil wird auf <div> angewendet, wenn es sowohl h1 als auch p enthält.

Komplexe Bedingungen mit Verschachtelung

section:has(article:has(img)) {   outline: 2px dashed blue; }

Der Stil wird auf <section> angewendet, wenn darin ein <article> vorhanden ist und in diesem — <img>.

Kombination mit Pseudoklassen

form:has(input:invalid) {   border: 2px solid red; }

Der Stil wird auf <form> angewendet, wenn darin mindestens ein ungültiges <input> vorhanden ist.

N.B. Selektoren mit :has() können leistungsintensiv sein, insbesondere wenn sie auf großen Seiten verwendet werden. Der Browser muss die Innereien jedes Elements durchsehen, um zu verstehen, ob der Stil angewendet werden soll.

---