Bộ chọn has
Bộ chọn :has chọn các phần tử,
bên trong nó có chứa ít nhất một phần tử
phù hợp với bộ chọn đã chỉ định, không nhất thiết
phải là phần tử con trực tiếp.
Vì :has không thuộc đặc tả CSS,
nên để cải thiện hiệu suất trong các
trình duyệt hiện đại, tốt hơn nên sử dụng
$("bộ chọn css của bạn").has(bộ chọn/phần tử DOM).
Cú pháp
Chúng ta chọn các phần tử như sau:
javascript$(':has(bộ chọn)');
Chúng ta chọn các phần tử như sau nếu cần phần tử con trực tiếp phù hợp với bộ chọn:
javascript$(':has(>bộ chọn)');
Ví dụ
Hãy chọn chỉ những đoạn văn mà bên trong có
thẻ b và
thêm vào cuối chúng văn bản '!!!':
html<p>văn bản</p>
<p>văn bản</p>
<p><b>in đậm</b> văn bản</p>
<p><b>in đậm</b> văn bản</p>javascript$('p:has(b)').append('!!!');
Mã HTML sẽ trông như thế này:
html<p>văn bản</p>
<p>văn bản</p>
<p><b>in đậm</b> văn bản!!!</p>
<p><b>in đậm</b> văn bản!!!</p>