:has() selector là gì?

Parent selector trong CSS (trước đây không có). Chọn element có chứa selector con.

Ví dụ: article:has(img) chọn article có chứa img. div:has(> p) chọn div có p là direct child. Practical use case: :has(input:focus) để style form field khi input bên trong đang được focus.

Lưu ý: :has() có thể tốn performance khi dùng trong dynamic selectors phức tạp. Browser support: baseline 2023 (Chrome 105+, Safari 15.4+, Firefox 121+).

A parent selector in CSS (previously impossible). Selects elements that contain a matching child selector.

Example: article:has(img) selects articles containing an image. div:has(> p) selects divs with a direct p child. Practical use: :has(input:focus) to style a form field when its input is focused.

Note: :has() can be expensive in complex dynamic selectors. Browser support: baseline 2023 (Chrome 105+, Safari 15.4+, Firefox 121+).