Dersubsequent-sibling Kombinator (~, eine Tilde) trennt zwei Selektoren und erfasstalle Instanzen des zweiten Elements, die nach dem ersten Element folgen (nicht unbedingt unmittelbar) und dasselbe Elternelement haben.

Im folgenden Beispiel hilft der subsequent-sibling Kombinator (~) dabei, Absätze auszuwählen und zu stylen, die sowohl Geschwister eines Bildes sind als auch nach jedem Bild erscheinen.

img ~ p {  color: red;}

Syntax

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

Beispiele

Verwendung des Kombinators mit einfachen Selektoren

Dieses Beispiel zeigt die Verwendung des~ Kombinators, wenn beide Selektoren einfache Selektoren sind (p undspan).

<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>

p ~ span {  color: red;}

Verwendung des Kombinators mit komplexen Selektoren

Dieses Beispiel enthält zweikomplexe Selektoren, beide verwenden den subsequent-sibling Kombinator:.foo p ~ span und.foo p ~ .foo span.

• Der erste komplexe Selektor,.foo p ~ span, erfasst allespan-Elemente, die nach einem Absatz kommen,wenn dasspan und der Absatz dasselbe Elternelement teilenund dieses Elternelement oder ein Vorfahre dieses Elements die Klasse.foo hat.
• Der zweite komplexe Selektor,.foo p ~ .foo span, erfasst allespan-Elemente, die ein Nachfolger des Elements mit der Klasse.foo sind,wenn dieses Element ein Geschwister des zuvor erwähnten Absatzes ist.

Das folgende Beispiel zeigt, dass das Ziel-Element im komplexen Selektor dasselbe Elternelement wie das anfängliche Element im komplexen Selektor teilen muss.

<h1>Dream big</h1><span>And yet again this is a red span!</span><div>  <p>Here is another paragraph.</p>  <span>A blue span</span>  <div>    <span>A green span</span>  </div></div>

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

Im obigen HTML sind die zwei Geschwister von.foo pspan und.foo. Das grünespan ist ein Nachkomme der Klasse.foo, die ein Geschwister vonp ist.

• Wenn der Zielselektorspan ist, wird dasspan-Element ausgewählt, das ein Geschwister vonp ist. Dasp-Element ist ein Nachkomme von.foo, ebenso wie seinespan-Geschwister.
• In.foo p ~ .foo span ist der Zielselektorspan, das ein Nachkomme von.foo ist. In diesem Fall wird dasspan-Element ausgewählt, das ein Nachkomme von.foo ist, wenn diese.foo ein Geschwister vonp ist; im Grunde sind beide in einem Vorfahren von.foo verschachtelt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Next-sibling Kombinator