Chọn tất cả phần tử có thuộc tính alt với CSS (Attribute Selector)

Bộ chọn thuộc tính tồn tại [attribute]

Bộ chọn [attribute] chọn các phần tử **có chứa thuộc tính chỉ định**, bất kể giá trị là gì. Rất hữu ích cho validation, accessibility styling, hay debug.

Cú pháp

[ten-thuoc-tinh] {
  /* Style cho phần tử CÓ thuộc tính này */
}

Ví dụ: Chọn img có alt

<!DOCTYPE html>
<html>
<head>
  <style>
    img[alt] {
      border: 3px solid orange;
    }
  </style>
</head>
<body>
  <img src="tutor_connect_home.jpg" height="200" width="200">              <!-- KHÔNG có alt -->
  <img src="tutorial_library_home.jpg" height="200" width="200" alt="Tutorials Library"> <!-- CÓ alt -->
</body>
</html>

Kết quả

Chỉ hình ảnh thứ 2 (có `alt="Tutorials Library"`) được viền cam. Hình ảnh thứ 1 không có thuộc tính alt nên không khớp.

Các biến thể Attribute Selector

Selector	Tên	Khớp khi
`[attr]`	Existence	Có thuộc tính (bất kỳ giá trị)
`[attr=value]`	Exact match	Giá trị chính xác = "value"
`[attr^=value]`	Prefix	Giá trị bắt đầu bằng "value"
`[attr$=value]`	Suffix	Giá trị kết thúc bằng "value"
`[attr*=value]`	Substring	Giá trị chứa "value" ở bất kỳ đâu
`[attr~=value]`	Word	Giá trị chứa từ "value" (tách bởi space)
`[attr\|=value]`	Hyphen	Giá trị = "value" hoặc bắt đầu "value-"
`[attr="value" i]`	Case-insensitive	Khớp không phân biệt hoa/thường (CSS4)
`[attr="value" s]`	Case-sensitive	Khớp phân biệt hoa/thường (CSS4)

Ứng dụng thực tế

Accessibility audit: img:not([alt]) { outline: 2px solid red; } - highlight ảnh thiếu alt.
External links: a[href^="http"]::after { content: " 🔗"; }.
Form validation: input[required]:invalid { border-color: red; }.
PDF links: a[href$=".pdf"]::after { content: " [PDF]"; }.
Language: [lang|="en"] { font-family: ...; } (en, en-US, en-GB...).

Lưu ý

Attribute selector có độ đặc hiệu = class (0,1,0). Kết hợp với element: img[alt] specificity = (0,1,1).