tag01~tag02

Đị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ợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

"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.

THÔNG BÁO LỖI