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

Комбинатор последующих соседей (~, тильда) разделяет два селектора и выбирает все экземпляры второго элемента, которые следуют за первым элементом (не обязательно непосредственно) и имеют с ним общего родителя.

В следующем примере комбинатор последующих соседей (~) помогает выбрать и стилизовать абзацы, которые являются соседними элементами изображения и следуют за любым изображением.

img ~ p {
  color: red;
}

Синтаксис

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

Примеры

Использование комбинатора с простыми селекторами

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

Спецификации

Совместимость с браузерами

См. также

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