Định nghĩa và sử dụng
- "tag01~tag02" chọn tất cả thành phần <tag02> khi có thành phần <tag01> ở trước.
- Cả thành phần <tag02> và <tag01> nên cùng cấp với nhau, cùng nằm trong thành phần cha (khác cấp sẽ không có tác dụng).
Cấu trúc
tag01~tag02 {
property: value;
}
Ví dụ
HTML viết:
<html>
<head></head>
<body>
<p>p trước thành phần ul</p>
<ul>
<li>Thành phần ul</li>
</ul>
<p>p sau thành phần ul</p>
<p>p sau thành phần ul</p>
<div>
<p>p sau thành phần ul nhưng khác cấp</p>
</div>
<p>p sau thành phần ul</p>
<p>p sau thành phần ul</p>
</body>
</html>
Hiển thị trình duyệt khi chưa có CSS:
p trước thành phần ul
- Thành phần ul
p sau thành phần ul
p sau thành phần ul
p sau thành phần ul nhưng khác cấp
p sau thành phần ul
p sau thành phần ul
CSS viết:
ul~p{
color: blue;
}
Hiển thị trình duyệt khi đã có css:
p trước thành phần ul
- Thành phần ul
p sau thành phần ul
p sau thành phần ul
p sau thành phần ul nhưng khác cấp
p sau thành phần ul
p sau thành phần ul
Ta thấy những thành phần <p> ở vị trí sau thành phần <ul> đều đã được chọn, ngoại trừ thành phần <p> ở vị trí trước thành phần <ul> và thành phần <p> ở vị trí khác cấp với thành phần <ul>.
Trình duyệt hỗ trợ
"tag01~tag02" được hỗ trợ trong đa số các trình duyệt.
Ghi chú:
Không hỗ trợ cho trình duyệt IE6.
Cần khai báo <!DOCTYPE> cho các trình duyệt IE8 trở xuống.