Cách chọn phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách chọn ra các phần tử dựa theo:
Tên thuộc tính của phần tử
Giá trị thuộc tính của phần tử
Bộ chọn [attribute]
Bộ chọn [attribute] dùng để chọn ra các phần tử có chứa thuộc tính được chỉ định.

Ví dụ
Đoạn mã dưới đây dùng để chọn:

Các phần tử <div> có chứa thuộc tính class
Các phần tử có chứa thuộc tính id
Các phần tử <img> có chứa thuộc tính width

Bộ chọn [attribute=”value”]
Bộ chọn [attribute=”value”] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị được chỉ định.

Ví dụ
Đoạn mã dưới đây dùng để chọn:

Các phần tử <div> có chứa thuộc tính class với giá trị a
Các phần tử có chứa thuộc tính id với giá trị c
Các phần tử <img> có chứa thuộc tính width với giá trị 150px

Bộ chọn [attribute^=”value”]
Bộ chọn [attribute^=”value”] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải được bắt đầu bằng các ký tự được chỉ định

Ví dụ
Chọn ra các phần tử có chứa thuộc tính class với giá trị của thuộc tính class phải được bắt đầu bằng abc

Bộ chọn [attribute$=”value”]
Bộ chọn [attribute$=”value”] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải được kết thúc bằng các ký tự được chỉ định

Ví dụ
Chọn ra các phần tử có chứa thuộc tính class với giá trị của thuộc tính class phải được kết thúc bằng abc

Bộ chọn [attribute~=”value”]
Bộ chọn [attribute~=”value”] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải chứa MỘT TỪ được chỉ định.

Ví dụ
Chọn các phần tử có chứa thuộc tính class với giá tị của thuộc tính class phải chứa TỪ abc

Bộ chọn [attribute*=”value”]
Bộ chọn [attribute*=”value”] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải chứa CÁC KÝ TỰ được chỉ định.

Ví dụ
Chọn các phần tử có chứa thuộc tính class với giá tị của thuộc tính class phải chứa KÝ TỰ abc

Bộ chọn [attribute|=”value”]
Bộ chọn [attribute|=”value”] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải được bắt đầu bằng các ký tự được chỉ định (phía sau nó phải là dấu gạch nối nếu còn tồn tại các ký tự khác)

Ví dụ
Chọn ra các phần tử có chứa thuộc tính class với giá trị của thuộc tính class phải được bắt đầu bằng abc (phía sau nó là dấu gạch nối nếu còn tại các ký tự khác)

 

Học CSS