CSS selectors cho phép áp dụng style cho phần tử cụ thể. Attribute selector chọn phần tử dựa trên sự hiện diện hoặc giá trị của thuộc tính HTML.
Thuộc tính HTML (HTML Attributes)
Thuộc tính định nghĩa đặc tính thêm cho phần tử: href cho link, src cho ảnh, class, id, title, alt... Cú pháp: name="value".
Các loại Attribute Selector
1. [attribute] — Có thuộc tính
[title] { font-size: 16px; }
Áp dụng cho mọi phần tử có thuộc tính title, bất kể giá trị.
2. element[attribute] — Phần tử cụ thể có thuộc tính
p[title] { font-size: 16px; }
Chỉ áp dụng cho <p> có thuộc tính title.
3. [attribute="value"] — Giá trị chính xác
a[href="careerkarma.com"] { background-color: orange; }
Chỉ link có href chính xác bằng "careerkarma.com".
4. [attribute~="value"] — Chứa từ (space-separated)
p[title~="blue"] { color: blue; }
Khớp nếu giá trị chứa từ "blue" tách bằng khoảng trắng: "blue color", "color blue". Không khớp "blueColor".
5. [attribute|="value"] — Bắt đầu bằng từ + hyphen
div[class|="top"] { padding-top: 10px; }
Khớp class: "top", "top-style", "top-bar". Không khớp "topstyle" (không có hyphen).
6. [attribute^="value"] — Bắt đầu bằng chuỗi
div[class^="paddingBottom"] { padding-bottom: 10px; }
Khớp class bắt đầu bằng "paddingBottom": "paddingBottomStyle", "paddingBottom-element". Không cần từ hoàn chỉnh.
7. [attribute$="value"] — Kết thúc bằng chuỗi
a[href$=".app"] { color: gray; }
Khớp link kết thúc bằng ".app".
8. [attribute*="value"] — Chứa chuỗi bất kỳ đâu
div[class*="allPadding"] { padding: 50px; }
Khớp class chứa "allPadding" ở bất kỳ vị trí: "new allPadding", "allPadding-blue", "surroundAllPadding". Linh hoạt nhất.
Kết luận
Attribute selector mạnh mẽ để style dựa trên thuộc tính HTML mà không cần thêm class. 8 loại selector bao phủ hầu hết nhu cầu: tồn tại, giá trị chính xác, chứa từ, tiền tố/hậu tố, chứa chuỗi con.