Làm cách nào để viết CSS cho lớp cha?

CSS là viết tắt của cascading stylesheets, về cơ bản có nghĩa là những thứ sau này trong trang được ưu tiên hơn những thứ trước đó (với một số cảnh báo chính). Điều này cũng áp dụng cho cách chúng tôi chọn các phần tử - từ phần tử gốc sang phần tử con, không có cách nào để chọn phần tử gốc, cho đến bây giờ

Trong đặc tả CSS Selectors 4, CSS giới thiệu một bộ chọn mới có tên là :has(), bộ chọn này cuối cùng cho phép chúng tôi chọn cha mẹ. Điều đó có nghĩa là chúng ta sẽ có thể nhắm mục tiêu một phần tử CSS mà has con cụ thể trong đó. Điều này đã được hỗ trợ trong Safari và cũng có trong Chrome 105. Bảng hỗ trợ đầy đủ được hiển thị bên dưới

Với sự hỗ trợ ngày càng tăng, trong bài viết này, tôi sẽ tập trung vào cách hoạt động của lựa chọn cấp độ gốc CSS và cách bạn có thể thực hiện điều đó ngay hôm nay khi có hỗ trợ. Trong thời gian chờ đợi, nếu bạn cần hỗ trợ đầy đủ trong tất cả các trình duyệt, bạn cũng có thể triển khai polyfill này cho đến khi có hỗ trợ CSS gốc

Cách bộ chọn gốc hoạt động trong CSS

Trong CSS, nếu chúng ta muốn chọn thứ gì đó, chúng ta sử dụng bộ chọn đi xuống DOM. Ví dụ: chọn thẻ p trong thẻ div trông như thế này

div p {
    color: red;
}

Tuy nhiên, cho đến bây giờ, chúng tôi thực sự không thể chọn các thẻ div có các thẻ p bên trong chúng và điều này có nghĩa là chúng tôi phải sử dụng Javascript. Lý do chính khiến điều này không được triển khai trong CSS là vì đây là một hoạt động khá tốn kém để thực hiện. CSS tương đối nhanh để phân tích cú pháp, nhưng việc chọn các thẻ gốc yêu cầu khối lượng xử lý lớn hơn tương đối đáng kể

Sử dụng bộ chọn

/* Makes the div color: red; */
div:has(p) {
    color: red;
}

2, giờ đây chúng ta có thể chọn các phần tử div có một phần tử con p hoặc bất kỳ tổ hợp bộ chọn bình thường nào. Ví dụ: chọn một div với một con p bây giờ trông như thế này

/* Makes the div color: red; */
div:has(p) {
    color: red;
}

Điều này sẽ làm cho bất kỳ div nào có con p chuyển sang màu đỏ

Kết hợp lựa chọn gốc với các bộ chọn khác

Cũng giống như bất kỳ bộ chọn CSS nào khác, chúng ta có thể kết hợp bộ chọn này cho các trường hợp cụ thể. Ví dụ: nếu bạn chỉ muốn chọn các thẻ div có

div:has(> span) {
    color: red;
}

0 con trực tiếp

div:has(> span) {
    color: red;
}

Như từ vựng của

/* Makes the div color: red; */
div:has(p) {
 color: red;
}

2 gợi ý, nó không chỉ giới hạn trong việc lựa chọn cha mẹ. Ví dụ, bên dưới chúng ta có thể chọn một

div:has(> span) {
    color: red;
}

0 mà

/* Makes the div color: red; */
div:has(p) {
    color: red;
}

2 là anh chị em của div

________số 8_______

Hoặc thậm chí, chọn một phần tử không có phần tử con, bằng cách sử dụng bộ chọn

div:has(> span) {
    color: red;
}

5. Ví dụ: phần sau sẽ chọn bất kỳ div nào không có con p

div:not(:has(p)) {
    color: red;
}

Chọn các phần tử chỉ chứa văn bản trong CSS

Một vấn đề rất phổ biến trong CSS là thẻ

div:has(> span) {
    color: red;
}

7 không chọn các phần tử chứa bất kỳ văn bản nào - vì vậy đôi khi một phần tử có thể chứa một khoảng trắng và

div:has(> span) {
 color: red;
}

7 sẽ không được áp dụng. Bộ chọn

/* Makes the div color: red; */
div:has(p) {
    color: red;
}

2 cho phép chúng ta chọn các phần tử chỉ chứa các nút văn bản và không có phần tử con nào khác

Mặc dù đây không phải là giải pháp hoàn hảo cho các phần tử

div:has(> span) {
    color: red;
}

7 đơn giản có khoảng trắng (vì điều này sẽ chọn bất kỳ phần tử nào chỉ có văn bản và không có phần tử DOM HTML bổ sung nào) - nó cung cấp cho chúng tôi khả năng chọn các phần tử DOM chỉ với các nút văn bản, điều mà trước đây không có . Chúng ta có thể đạt được điều này với đoạn mã sau

div:not(:has(*)) {
    background: green;
}

Phần kết luận

Với việc bổ sung hỗ trợ bộ chọn :has() trong Chrome 105, bộ chọn gốc nhanh chóng trở thành hiện thực mà chúng tôi sẽ sớm có thể sử dụng trong các dự án thực tế. Hiện tại, với sự hỗ trợ của Safari, thật dễ dàng để kiểm tra và xem nó sẽ hoạt động như thế nào trong tương lai. Điều này có lợi ích bổ sung là cho phép chúng tôi cắt giảm các giải pháp Javascript đối với lựa chọn gốc, điều này khá phổ biến trong nhiều ứng dụng và sản phẩm

Bạn thậm chí có thể bắt đầu sử dụng

/* Makes the div color: red; */
div:has(p) {
    color: red;
}

2 ngay hôm nay, nếu bạn cũng triển khai polyfill này và sau đó xóa polyfill sau khi có hỗ trợ riêng cho Chrome và các trình duyệt khác

Làm cách nào để sử dụng lớp cha trong CSS?