Комбинатор последующих сиблингов

В этом примере показано использование комбинатора ~ когда оба селектора являются простыми селекторами (p и 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;
}

Этот пример содержит два сложных селектора, оба использующих комбинатор последующих сиблингов: .foo p ~ span и .foo p ~ .foo span.

• Первый сложный селектор, .foo p ~ span, соответствует всем span-элементам, которые следуют за абзацем, если span и абзац имеют одного родителя и у этого родителя или его предка есть класс .foo.
• Второй сложный селектор, .foo p ~ .foo span, соответствует всем span-элементам, которые являются потомками элемента с классом .foo, если этот элемент является сиблингом вышеупомянутого абзаца.

Приведенный ниже пример показывает, что целевой элемент в сложном селекторе должен иметь того же родителя, что и начальный элемент в сложном селекторе.

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

В приведенном выше HTML-коде два сиблинга элемента .foo p являются span и .foo. Зеленый span является потомком класса .foo, который является сиблингом элемента p.

• Когда целевой селектор — span, выбирается элемент span, который является сиблингом p . Элемент p является потомком .foo, как и его сиблинги span.
• В .foo p ~ .foo span, целевой селектор — span , который является потомком .foo . В этом случае элемент span , являющийся потомком .foo , выбирается, если этот .foo является сиблингом p; по сути, оба вложены в предка .foo.

• Комбинатор последующих сиблингов