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.

 

Leave a Reply

avatar
  Subscribe  
Notify of
%d bloggers like this: