Subsequent-sibling combinator

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

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

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.

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

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

• Next-sibling kombinator