Chọn phần tử có giá trị thuộc tính bắt đầu bằng giá trị chỉ định với CSS

Bộ chọn attribute bắt đầu bằng giá trị (attribute^="value")

Để chọn các phần tử HTML có giá trị thuộc tính bắt đầu bằng một chuỗi cụ thể, bạn sử dụng bộ chọn [attribute^="value"] trong CSS. Điều này rất hữu ích khi bạn muốn áp dụng kiểu dáng cho nhóm phần tử có thuộc tính chung (như alt, href, class) với tiền tố giống nhau.

Cú pháp

[attribute^="value"] {
  /* Các quy tắc CSS */
}

Ví dụ minh họa

Trong ví dụ dưới đây, chúng ta áp dụng viền xanh cho tất cả thẻ <img> có thuộc tính alt bắt đầu bằng "Tutor":

<!DOCTYPE html>
<html>
<head>
  <style>
    [alt^="Tutor"] {
      border: 5px solid blue;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <img src="https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg" 
       height="200" width="200" alt="Tutor Connect">
  <img src="https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" 
       height="200" width="200" alt="Tutorials Library">
</body>
</html>

Kết quả: Chỉ hình ảnh đầu tiên (alt="Tutor Connect") được viền xanh vì giá trị alt của nó bắt đầu bằng "Tutor". Hình ảnh thứ hai (alt="Tutorials Library") không khớp.

Lưu ý quan trọng

• Bộ chọn phân biệt chữ hoa/thường (case-sensitive) trong hầu hết trình duyệt hiện đại.
• Có thể kết hợp với các bộ chọn khác: img[alt^="Tutor"] chỉ chọn thẻ img.
• Hữu ích cho việc styling các link ngoài (href^="http"), icon font (class^="icon-"), v.v.