ViệtTrong CSS, Attribute Selectors là một cách mạnh mẽ để chọn các phần tử HTML dựa trên thuộc tính của chúng. Thay vì sử dụng class hoặc id, bạn có thể chọn các phần tử có thuộc tính nhất định hoặc giá trị cụ thể của thuộc tính. Điều này đặc biệt hữu ích khi bạn muốn làm việc với các phần tử có thuộc tính đa dạng mà không cần thêm class hoặc id.
1. Tổng quan về attribute selectors
Attribute Selectors giúp bạn chọn phần tử dựa trên:
- Sự tồn tại của thuộc tính
- Giá trị chính xác của thuộc tính
- Giá trị một phần của thuộc tính
- Giá trị bắt đầu hoặc kết thúc bằng chuỗi ký tự cụ thể
Cú pháp cơ bản của Attribute Selectors trong CSS là:
[element[attribute]]
[element[attribute="value"]]2. Các loại attribute selectors trong css
Dưới đây là các loại CSS Attribute Selectors phổ biến:
2.1. Chọn phần tử có thuộc tính
Chọn tất cả các phần tử có một thuộc tính nhất định, bất kể giá trị của nó.
/* Chọn tất cả thẻ a có thuộc tính href */
a[href] {
color: blue;
}Ví dụ này áp dụng kiểu cho tất cả các liên kết (<a>) có thuộc tính href, bất kể giá trị của thuộc tính này là gì.
2.2. Chọn phần tử với giá trị thuộc tính cụ thể
Chọn các phần tử có thuộc tính với một giá trị cụ thể.
/* Chọn tất cả thẻ input có type là "text" */
input[type="text"] {
background-color: #f3f3f3;
}Đoạn mã trên sẽ chọn tất cả các thẻ input với thuộc tính type có giá trị là text.
2.3. Chọn phần tử với giá trị thuộc tính chứa chuỗi cụ thể (*=)
Chọn các phần tử có thuộc tính chứa một chuỗi ký tự nhất định.
/* Chọn tất cả thẻ a có thuộc tính href chứa "google" */
a[href*="google"] {
color: red;
}Thuộc tính *= sẽ tìm bất kỳ giá trị nào của href có chứa chuỗi "google".
2.4. Chọn phần tử có giá trị thuộc tính bắt đầu với chuỗi cụ thể (^=)
Chọn các phần tử có thuộc tính bắt đầu bằng chuỗi ký tự nhất định.
/* Chọn tất cả thẻ a có thuộc tính href bắt đầu bằng "https" */
a[href^="https"] {
color: green;
}Thuộc tính ^= sẽ chọn những phần tử a có giá trị href bắt đầu với "https".
2.5. Chọn phần tử có giá trị thuộc tính kết thúc với chuỗi cụ thể ($=)
Chọn các phần tử có thuộc tính kết thúc bằng chuỗi ký tự nhất định.
/* Chọn tất cả thẻ img có thuộc tính src kết thúc bằng ".jpg" */
img[src$=".jpg"] {
border: 2px solid blue;
}Thuộc tính $= giúp bạn chọn những phần tử img có giá trị src kết thúc với .jpg.
2.6. Chọn phần tử có giá trị thuộc tính là một từ cụ thể (~=)
Chọn các phần tử có thuộc tính chứa một từ chính xác trong chuỗi giá trị.
/* Chọn tất cả thẻ div có class chứa từ "card" */
div[class~="card"] {
padding: 20px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}2.7. Chọn phần tử có giá trị thuộc tính bắt đầu bằng từ cụ thể (|=)
Chọn các phần tử có thuộc tính bắt đầu với một từ cụ thể hoặc chứa từ đó như một tiền tố được phân tách bằng dấu gạch ngang.
/* Chọn tất cả phần tử có thuộc tính lang là "en" hoặc bắt đầu với "en-" */
p[lang|="en"] {
font-style: italic;
}3. Ứng dụng thực tế của attribute selectors
CSS Attribute Selectors là công cụ mạnh mẽ giúp bạn điều khiển các phần tử dựa trên các thuộc tính khác nhau mà không cần sử dụng nhiều class. Điều này giúp mã HTML của bạn gọn gàng hơn, giảm việc sử dụng các class không cần thiết.
Ví dụ:
<a href="https://example.com" target="_blank">Link bên ngoài</a>
<a href="/contact">Liên hệ</a>/* Áp dụng phong cách khác nhau cho các liên kết bên ngoài */
a[target="_blank"] {
color: red;
text-decoration: underline;
}Trong ví dụ này, tất cả các liên kết mở trong cửa sổ mới (tức là có thuộc tính target="_blank") sẽ có màu đỏ và được gạch chân.
4. Kết luận
CSS Attribute Selectors là một phần quan trọng trong CSS, giúp bạn linh hoạt hơn trong việc chọn và áp dụng kiểu cho các phần tử HTML dựa trên thuộc tính và giá trị của chúng. Hiểu cách sử dụng Attribute Selectors sẽ giúp bạn viết mã CSS gọn gàng, dễ bảo trì hơn và tận dụng tối đa các khả năng của CSS.
