Chọn phần tử có giá trị thuộc tính chứa từ cụ thể với CSS (~= selector)

Bộ chọn từ trong thuộc tính [attr~="value"]

Bộ chọn [attribute~="value"] khớp khi giá trị thuộc tính **chứa một từ hoàn chỉnh** (tách bởi khoảng trắng). Khác với `*=` (chứa chuỗi con bất kỳ), `~=` yêu cầu ranh giới từ.

Cú pháp

[attribute~="word"] {
  /* Style khi attribute chứa từ "word" */
}

Ví dụ: Tìm từ "Tutorials" trong alt

<!DOCTYPE html>
<html>
<head>
  <style>
    [alt~="Tutorials"] {
      border: 5px solid orange;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <img src="tutor_connect_home.jpg" height="200" width="200" alt="Tutor Connect">       <!-- KHÔNG khớp -->
  <img src="tutorial_library_home.jpg" height="200" width="200" alt="Tutorials Library"> <!-- KHỚP: có từ "Tutorials" -->
</body>
</html>

So sánh ~= vs *= vs |=

Selector	Tên	Ví dụ giá trị	Khớp?
`[alt~="Tutorials"]`	Word	`"Tutorials Library"`	✓ (từ riêng)
`[alt~="Tutorials"]`	Word	`"TutorialsLibrary"`	✗ (không tách từ)
`[alt*="Tutorials"]`	Substring	`"TutorialsLibrary"`	✓ (chứa chuỗi)
`[alt\|="Tutorials"]`	Hyphen	`"Tutorials-Library"`	✓ (bắt đầu + dấu gạch ngang)
`[alt\|="Tutorials"]`	Hyphen	`"Tutorials Library"`	✗ (space không phải hyphen)

Ứng dụng thực tế

Class-like attribute: [data-tags~="featured"] - lọc item có tag "featured".
Language: [lang~="en"] - nhưng `|=` phù hợp hơn cho lang code.
Microformats: [class~="h-card"] - detect microformat class.
ARIA: [aria-describedby~="error-msg"].

Lưu ý

Phân biệt chữ hoa/thường (case-sensitive) trong hầu hết trình duyệt.
CSS4 thêm flag `i` để case-insensitive: [alt~="tutorials" i].
Không hoạt động cho giá trị không có space (single word) - lúc này `~=` = `=` .