Cụ thể hơn với :not(), :has() và :matches() trong CSS

Trong CSS, việc lựa chọn phần tử để chỉnh tương đối “loằng ngoàng” và tốn thời gian. Ở đây mình sẽ giới thiệu với bạn về :not(), :has() và :matches() giúp bạn lựa chọn phần tử nhanh chóng và hiệu quả.

Chúng ta hãy bắt đầu thôi!

:not()

:not() dùng để loại bỏ lựa chọn có trong ngoặc.

Như ví dụ dưới đây bạn có thể thấy: từ trái sang phải, phần tử được lựa chọn là div, pseudo-class :notvới lựa chọn class .one, tiếp đến là thẻ p.

Hay như ví dụ về nhiều class được lựa chọn trong :not() như thế này.

Vậy, bất kỳ phần tử p nào không phải là con của một div có một lớp class .one hoặc .two (hoặc cả hai), hoặc có id #navbar, sẽ được chọn.

Nhưng làm sao để tính toán lựa chọn chi tiết hơn? Chúng ta lại có thêm pseudo-classes :has()matches()

:matches, has()

Cách lựa chọn cũng tương tự như not().

:matches() chấp nhận danh sách chọn hợp lệ.

:has() cũng tương tự như :matches() . Nhưng nó kiểm tra xem phần tử này có gì trong nó và chọn.

Và cho ra với mẫu tương tự như dưới đây.

 

Bài viết liên quan

Bài viết cùng chuyên mục

Leave a Reply

avatar
  Subscribe  
Notify of
Thuê Tôi