Các ~
selector là trong thực tế các combinator anh chị em chung (đổi tên thành tiếp theo-sibling combinator trong selectors Cấp 4 ):
Bộ kết hợp anh chị em chung được tạo từ ký tự "tilde" (U + 007E, ~) tách hai chuỗi các bộ chọn đơn giản. Các phần tử được đại diện bởi hai chuỗi chia sẻ cùng một cha mẹ trong cây tài liệu và phần tử được đại diện bởi trình tự đầu tiên có trước (không nhất thiết phải ngay lập tức) phần tử được đại diện bởi phần thứ hai.
Hãy xem xét ví dụ sau:
.a ~ .b {
background-color: powderblue;
}
<ul>
<li class="b">1st</li>
<li class="a">2nd</li>
<li>3rd</li>
<li class="b">4th</li>
<li class="b">5th</li>
</ul>
.a ~ .b
phù hợp với mục danh sách thứ 4 và thứ 5 vì chúng:
- Là
.b
các yếu tố
- Là anh chị em của
.a
- Xuất hiện sau
.a
theo thứ tự nguồn HTML.
Tương tự như vậy, .check:checked ~ .content
phù hợp với tất cả các .content
yếu tố là anh em ruột .check:checked
và xuất hiện sau nó.