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: ...
Ở 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.
Đ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 awidth
div[class]{
border: 5px solid red;
}
[id]{
border: 5px solid green;
}
img[awidth]{
border: 5px solid blue;
}
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.
Đ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 awidth với giá trị 150px
div[class="a"]{
border: 5px solid red;
}
[id="c"]{
border: 5px solid green;
}
img[awidth="150px"]{
border: 5px solid blue;
}
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
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
[class^="abc"]{
border: 5px solid red;
}
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
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
[class$="abc"]{
border: 5px solid red;
}
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.
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
[class~="abc"]{
border: 5px solid red;
}
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.
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
[class*="abc"]{
border: 5px solid red;
}
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)
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)
[class|="abc"]{
border: 5px solid red;
}
