Subsequent-sibling combinator

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Der subsequent-sibling combinator (~, eine Tilde) trennt zwei Selektoren und trifft auf alle Instanzen des zweiten Elements zu, die dem ersten Element folgen (nicht notwendigerweise unmittelbar) und das gleiche Elternelement teilen.

Im folgenden Beispiel hilft der subsequent-sibling combinator (~), Absätze zu selektieren und zu stylen, die sowohl Geschwister eines Bildes sind als auch nach einem beliebigen Bild erscheinen.

css
img ~ p {
  color: red;
}

Syntax

css
/* The white space around the ~ combinator is optional but recommended. */
former_element ~ target_element { style properties }

Beispiele

Verwendung des Combinators mit einfachen Selektoren

Dieses Beispiel zeigt die Verwendung des ~ Combinators, wenn beide Selektoren einfache Selektoren sind (p und span).

html
<article>
  <span>This is not red because it appears before any paragraph.</span>
  <p>Here is a paragraph.</p>
  <code>Here is some code.</code>
  <span>
    This span is red because it appears after the paragraph, even though there
    are other nodes in between.
  </span>
  <p>Whatever it may be, keep smiling.</p>
  <h1>Dream big</h1>
  <span>
    Doesn't matter how many or what kind of nodes are in between, all spans from
    the same parent after a paragraph are red.
  </span>
</article>
<span>
  This span is not red because it doesn't share a parent with a paragraph.
</span>
css
p ~ span {
  color: red;
}

Verwendung des Combinators mit komplexen Selektoren

Dieses Beispiel enthält zwei komplexe Selektoren, die beide den subsequent-sibling combinator verwenden: .foo p ~ span und .foo p ~ .foo span.

  • Der erste komplexe Selektor, .foo p ~ span, trifft auf alle 'span'-Elemente zu, die nach einem Absatz kommen, wenn das 'span'-Element und der Absatz das gleiche Elternelement teilen und dieses Elternelement oder ein Vorfahre dieses Elternelements die Klasse .foo hat.
  • Der zweite komplexe Selektor, .foo p ~ .foo span, trifft auf alle 'span'-Elemente zu, die ein Nachkomme des Elements mit der Klasse .foo sind, wenn dieses Element ein Geschwister des zuvor genannten Absatzes ist.

Das folgende Beispiel zeigt, dass das Ziel-Element im komplexen Selektor das gleiche Elternelement wie das Anfangselement im komplexen Selektor teilen muss.

html
<h1>Dream big</h1>
<span>And yet again this is a red span!</span>
<div class="foo">
  <p>Here is another paragraph.</p>
  <span>A blue span</span>
  <div class="foo">
    <span>A green span</span>
  </div>
</div>
css
.foo p ~ span {
  color: blue;
}

.foo p ~ .foo span {
  color: green;
}

Im obigen HTML sind die beiden Geschwister von .foo p span und .foo. Das grüne span ist ein Nachkomme der Klasse .foo, die ein Geschwister von p ist.

  • Wenn der Zielselektor span ist, wird das span-Element selektiert, das ein Geschwister von p ist. Das p-Element ist ein Nachkomme von .foo, ebenso wie seine span-Geschwister.
  • In .foo p ~ .foo span, ist der Zielselektor span, das ein Nachkomme von .foo ist. In diesem Fall wird das span-Element ausgewählt, das ein Nachkomme von .foo ist, wenn diese .foo ein Geschwister von p ist; im Wesentlichen sind beide in einem Vorfahren von .foo verschachtelt.

Spezifikationen

Specification
Selectors Level 4
# general-sibling-combinators

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch