:has()

:has(<relative-selector-list>) {
  /* ... */
}

Wenn die :has()-Pseudoklasse selbst in einem Browser nicht unterstützt wird, schlägt der gesamte Selektorblock fehl, es sei denn, :has() befindet sich in einer fehlerverzeihenden Selektorliste, wie zum Beispiel in :is() und :where().

Die :has()-Pseudoklasse kann nicht innerhalb einer anderen :has() verschachtelt werden. Dies liegt daran, dass viele Pseudoelemente bedingt basierend auf dem Styling ihrer Vorfahren existieren und deren Abfrage durch :has() zyklische Abfragen einführen könnte.

Pseudoelemente sind auch keine gültigen Selektoren innerhalb von :has() und Pseudoelemente sind keine gültigen Anker für :has().

Die :has()-Stildeklaration im folgenden Beispiel passt den Abstand nach <h1>-Überschriften an, wenn sie direkt von einer <h2>-Überschrift gefolgt werden.

HTML

<section>
  <article>
    <h1>Morning Times</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>

CSS

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1,
h2 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150 149 149);
}

h1,
h2 {
  margin: 0 0 1rem 0;
}

h1:has(+ h2) {
  margin: 0 0 0.25rem 0;
}

Ergebnis

Dieses Beispiel zeigt zwei ähnliche Texte nebeneinander zum Vergleich - links eine H1-Überschrift gefolgt von einem Absatz und rechts eine H1-Überschrift gefolgt von einer H2-Überschrift und dann einem Absatz. Im Beispiel rechts hilft :has(), das H1-Element auszuwählen, das direkt von einem H2-Element gefolgt wird (angegeben durch den nächsten Geschwisterkombinator +), und die CSS-Regel reduziert den Abstand nach einem solchen H1-Element. Ohne die :has()-Pseudoklasse können Sie keine CSS-Selektoren verwenden, um ein vorhergehendes Geschwisterelement eines anderen Typs oder ein übergeordnetes Element auszuwählen.

Dieses Beispiel baut auf dem vorherigen Beispiel auf, um zu zeigen, wie man mehrere Elemente mit :has() auswählt.

HTML

<section>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
  <article>
    <h1>Morning Times</h1>
    <h2>Delivering you news every morning</h2>
    <h3>8:00 am</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </article>
</section>

CSS

section {
  display: flex;
  align-items: start;
  justify-content: space-around;
}

article {
  display: inline-block;
  width: 40%;
}

h1 {
  font-size: 1.2em;
}

h2 {
  font-size: 1em;
  color: rgb(150 149 149);
}

h3 {
  font-size: 0.9em;
  color: darkgrey;
}

h1,
h2,
h3 {
  margin: 0 0 1rem 0;
}

:is(h1, h2, h3):has(+ :is(h2, h3, h4)) {
  margin: 0 0 0.25rem 0;
}

Ergebnis

Hier wird die erste :is()-Pseudoklasse verwendet, um eines der Überschriftenelemente in der Liste auszuwählen. Die zweite :is()-Pseudoklasse wird verwendet, um eine Liste von Geschwisterselektoren als Argument an :has() zu übergeben. Die :has()-Pseudoklasse hilft, jedes H1-, H2- oder H3-Element auszuwählen, das direkt (angegeben durch +) von einem H2-, H3- oder H4-Element gefolgt wird, und die CSS-Regel reduziert den Abstand nach solchen H1, H2 oder H3-Elementen.

Dieser Selektor hätte auch so geschrieben werden können:

:is(h1, h2, h3):has(+ h2, + h3, + h4) {
  margin: 0 0 0.25rem 0;
}

Der :has()-relationale Selektor kann verwendet werden, um zu prüfen, ob eines der mehreren Merkmale wahr ist oder ob alle Merkmale wahr sind.

Durch die Verwendung von durch Komma getrennten Werten im :has()-relationalen Selektor prüfen Sie, ob eines der Parameter existiert. x:has(a, b) wird x stylen, wenn Nachkomme a ODER b existiert.

Durch das Verketten mehrerer :has()-relationaler Selektoren prüfen Sie, ob alle Parameter existieren. x:has(a):has(b) wird x stylen, wenn Nachkomme a UND b existieren.

body:has(video, audio) {
  /* styles to apply if the content contains audio OR video */
}
body:has(video):has(audio) {
  /* styles to apply if the content contains both audio AND video */
}

Interessanterweise können wir einige CSS :has()-Konstruktionen mit der Lookahead Assertion in regulären Ausdrücken vergleichen, da beide es ermöglichen, Elemente (oder Strings in regulären Ausdrücken) basierend auf einer Bedingung auszuwählen, ohne tatsächlich das bedingungserfüllende Element (oder String) selbst auszuwählen.

Im regulären Ausdruck abc(?=xyz) wird der String abc nur dann gematcht, wenn er unmittelbar von dem String xyz gefolgt wird. Da es sich um einen Lookahead-Vorgang handelt, ist das xyz nicht im Match enthalten.

Das analoge Konstrukt in CSS wäre .abc:has(+ .xyz): Es wählt das .abc-Element nur dann aus, wenn es ein nächstes Geschwister .xyz gibt. Der Teil :has(+ .xyz) fungiert als Lookahead-Operation, weil das .abc-Element ausgewählt wird und nicht das .xyz-Element.

Ähnlich verhält es sich beim negativen Lookahead. Im regulären Ausdruck abc(?!xyz) wird der String abc nur dann gematcht, wenn er nicht von xyz gefolgt wird. Das analoge CSS-Konstrukt .abc:has(+ :not(.xyz)) wählt das .abc-Element nicht aus, wenn das nächste Element .xyz ist.

• :is(), :where(), :not()
• CSS-Selektoren und Kombinatoren
• CSS-Selektorstruktur
• Selektorliste
• CSS-Selektormodul
• DOM-Elemente mit Selektoren lokalisieren