Modern CSS selectors – :has() Pseudo-Class Selector

:has() Pseudo-Class Selector sẽ chọn những thành phần dựa vào parent của chúng, ví dụ như

a:has(img)

Đây có nghĩa là sẽ select những thẻ a có child là img. Hoặc có thể nói khác là chọn những thẻ img có parent là a.

Ví dụ bạn có trường hợp như sau

<div class="section">
  <a href="#">Đây là link</a>
</div>

<div class="section">
  <a href="#" class="active">Đây là link</a>
</div>

<div class="section">
  <a href="#">Đây là link</a>
</div>

<div class="section">
  <a href="#">Đây là link</a>
</div>

Bạn có một vài div có class .section như trên, nếu thẻ a trong section đó có class active, thì section chứa a.active đó sẽ có background màu đỏ. Và đây là cách làm

.section:has(.active) {
  background-color: red;
}

Dòng CSS này có nghĩa là chọn những div.section thoải điều kiện là có thẻ a có chứa class active để set background-color là màu đỏ

See the Pen :has selector by minhchau (@ngocminhxx) on CodePen.

:has() Pseudo-Class Selector này có vẻ rất tiện lợi trong vài mục đích, công việc code front-end sẽ dễ thở hơn khi có :has() . Tuy nhiên, nó vẫn còn đang rất mới, và chưa được nhiều trình duyệt hỗ trợ. Hiện tại ngoài Firefox ra, Chrome, Edge và Safari đã hỗ trợ selector này