:has() không phải là một bộ chọn cha. Nó giúp loại bỏ JavaScript.

Hãy tìm kiếm classList.toggle trong mã nguồn của bạn.

Có lẽ bạn sẽ tìm thấy nhiều trường hợp lặp lại cùng một mô hình. Một người dùng nhấp vào một checkbox hoặc tập trung (focus) vào một trường nhập liệu. Bạn sử dụng JavaScript để chuyển đổi (toggle) một class trên một phần tử cha. Điều này cho phép CSS định dạng (style) phần tử cha đó.

Bạn có thể xóa bỏ hầu hết các đoạn mã này.

Mọi người gọi :has() là bộ chọn cha (parent selector). Cách gọi này không chính xác. :has() kiểm tra một điều kiện. Nó xem xét nội dung của một phần tử để quyết định xem một kiểu dáng (style) có được áp dụng hay không.

Nó có thể kiểm tra:

  • Một phần tử con (descendant element)
  • Một phần tử anh em (sibling) cụ thể
  • Số lượng các mục
  • Sự vắng mặt của một phần tử

Dưới đây là một số ví dụ:

• Định dạng một thẻ (card) nếu nó chứa một hình ảnh: .card:has(img) { ... }

• Định dạng một hàng khi một checkbox được chọn: .option-row:has(input:checked) { background: var(--selected-bg); }

• Thay đổi bố cục lưới (grid layout) dựa trên số lượng mục: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

Ví dụ cuối cùng thay đổi bố cục chỉ bằng CSS thuần túy. Nó đọc trạng thái trực tiếp của DOM.

Trước đây, bạn cần JavaScript đóng vai trò như một người đưa tin. Một phần tử con không thể kích hoạt các kiểu dáng trên một phần tử tổ tiên. Bạn phải viết một trình lắng nghe (listener) để chuyển một class lên phía trên cây thư mục (tree).

Giờ đây, người đưa tin đã biến mất.

Nếu bạn sử dụng :has(), các kiểu dáng của bạn sẽ luôn chính xác. Chúng hoạt động ngay từ lần render đầu tiên. Chúng hoạt động ngay cả khi người dùng quay lại trang trước đó trong trình duyệt. Không có sự trễ giữa việc thay đổi trạng thái và thay đổi kiểu dáng.

Hãy sử dụng nó cho:

  • Kiểm tra tính hợp lệ của biểu mẫu (Form validation)
  • Trạng thái trống trong danh sách
  • Các bảng có thể đóng/mở (Toggleable panels)

Lưu ý rằng :has() có một cái giá phải trả. Trình duyệt phải đánh giá bộ chọn bên trong so với các phần tử con. Đối với hầu hết các tác vụ UI như kiểm tra tính hợp lệ hoặc chuyển đổi (toggles), bạn sẽ không nhận thấy sự khác biệt.

Tránh sử dụng nó cho các thay đổi với tần suất cao như vị trí cuộn (scroll positions) hoặc hàng ngàn trạng thái di chuột (hover states).

Đừng chuyển đổi class chỉ để điều khiển kiểu dáng từ một phần tử con. Hãy tự hỏi liệu :has() có thể diễn đạt điều kiện đó thay thế hay không. CSS của bạn sẽ gọn nhẹ hơn và JavaScript của bạn sẽ biến mất.

:has() hoạt động trên Chrome, Firefox, Safari và Edge.

Nguồn: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej