Subsequent-sibling combinator

Cú pháp

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

Ví dụ

Sử dụng bộ kết hợp với các bộ chọn đơn giản

Ví dụ này hiển thị việc sử dụng bộ kết hợp ~ khi cả hai bộ chọn đều là bộ chọn đơn giản (p và 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;
}

Sử dụng bộ kết hợp với các bộ chọn phức tạp

Ví dụ này chứa hai bộ chọn phức tạp, cả hai đều sử dụng bộ kết hợp anh em tiếp theo: .foo p ~ span và .foo p ~ .foo span.

• Bộ chọn phức tạp đầu tiên, .foo p ~ span, khớp với tất cả span đến sau một đoạn văn nếu span và đoạn văn có cùng cha và cha đó hoặc một tổ tiên của cha đó có lớp .foo.
• Bộ chọn phức tạp thứ hai, .foo p ~ .foo span, khớp với tất cả span là phần tử con của phần tử có lớp .foo nếu phần tử đó là anh em của đoạn văn đã đề cập trước đó.

Ví dụ dưới đây cho thấy rằng phần tử đích trong bộ chọn phức tạp phải có cùng cha với phần tử ban đầu trong bộ chọn phức tạp.

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

Trong HTML trên, hai anh em của .foo p là span và .foo. span màu xanh lá là phần tử con của lớp .foo, là anh em của p.

• Khi bộ chọn đích là span, phần tử span là anh em của p được chọn. Phần tử p là phần tử con của .foo, các anh em span của nó cũng vậy.
• Trong .foo p ~ .foo span, bộ chọn đích là span là phần tử con của .foo. Trong trường hợp này, phần tử span là phần tử con của .foo được chọn nếu .foo đó là anh em của p; về cơ bản, cả hai đều được lồng trong một tổ tiên của .foo.

Thông số kỹ thuật

Khả năng tương thích với trình duyệt

Xem thêm

• Next-sibling combinator