6.1 Các loại bộ chọn thuộc tính
Bộ chọn thuộc tính trong CSS cho phép lựa chọn các phần tử dựa trên sự tồn tại của thuộc tính, giá trị của chúng, hay các phần của giá trị thuộc tính. Chúng cung cấp khả năng linh hoạt và mạnh mẽ để tạo kiểu cho các phần tử HTML, rất hữu ích khi làm việc với nội dung động và các trang web tương tác.
Các loại bộ chọn thuộc tính
- Bộ chọn thuộc tính (Attribute Selector)
- Bộ chọn thuộc tính với giá trị (Attribute Selector with Value)
- Bộ chọn thuộc tính với giá trị bắt đầu (Attribute Selector with Prefix)
- Bộ chọn thuộc tính với giá trị kết thúc (Attribute Selector with Suffix)
- Bộ chọn thuộc tính có chứa giá trị (Attribute Selector with Substring)
- Bộ chọn thuộc tính với phân cách khoảng trắng (Attribute Selector with Whitespace)
- Bộ chọn thuộc tính với phân cách dấu gạch ngang (Attribute Selector with Hyphen)
6.2 Bộ chọn thuộc tính
Bộ chọn thuộc tính chọn các phần tử, có thuộc tính được chỉ định, không quan tâm đến giá trị của nó.
Cú pháp:
[thuộc tính] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả các phần tử có thuộc tính title */
[title] {
color: blue;
}
<p title="Đây là tiêu đề">Văn bản này sẽ có màu xanh.</p>
<p>Văn bản này sẽ không có màu xanh.</p>
6.3 Bộ chọn thuộc tính với giá trị
Bộ chọn thuộc tính với giá trị chọn các phần tử, có thuộc tính với giá trị được chỉ định.
Cú pháp:
[thuộc tính="giá trị"] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả các phần tử có thuộc tính title có giá trị "Ví dụ" */
[title="Ví dụ"] {
color: green;
}
<p title="Ví dụ">Văn bản này sẽ có màu xanh lục.</p>
<p title="Ví dụ khác">Văn bản này sẽ không có màu xanh lục.</p>
6.4 Bộ chọn thuộc tính, nơi giá trị có tiền tố
Bộ chọn thuộc tính với giá trị bắt đầu chọn các phần tử có thuộc tính bắt đầu với giá trị được chỉ định.
Cú pháp:
[thuộc tính^="giá trị"] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả các phần tử có thuộc tính title bắt đầu với "Đầu" */
[title^="Đầu"] {
color: red;
}
<p title="Đầu văn bản">Văn bản này sẽ có màu đỏ.</p>
<p title="Không phải đầu">Văn bản này sẽ không có màu đỏ.</p>
6.5 Bộ chọn thuộc tính, nơi giá trị có hậu tố
Bộ chọn thuộc tính với giá trị kết thúc chọn các phần tử có thuộc tính kết thúc bằng giá trị được chỉ định.
Cú pháp:
[thuộc tính$="giá trị"] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả các phần tử có thuộc tính title kết thúc bằng "cuối" */
[title$="cuối"] {
color: orange;
}
<p title="Đây là cuối">Văn bản này sẽ có màu cam.</p>
<p title="Đây là đầu">Văn bản này sẽ không có màu cam.</p>
6.6 Bộ chọn thuộc tính có giá trị con
Bộ chọn thuộc tính, có giá trị con chọn các phần tử có thuộc tính chứa giá trị được chỉ định.
Cú pháp:
[thuộc tính*="giá trị"] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả các phần tử có thuộc tính title chứa "giữa" */
[title*="giữa"] {
color: purple;
}
<p title="Đây là giữa văn bản">Văn bản này sẽ có màu tím.</p>
<p title="Không có giữa ở đây">Văn bản này sẽ không có màu tím.</p>
6.7 Bộ chọn thuộc tính với phân cách khoảng trắng
Bộ chọn thuộc tính với phân cách khoảng trắng chọn các phần tử có thuộc tính chứa một hoặc nhiều giá trị, được phân cách bằng khoảng trắng. Điều này hữu ích khi chọn các phần tử với các lớp hay vai trò cụ thể.
Cú pháp:
[thuộc tính~="giá trị"] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả các phần tử có thuộc tính class chứa "highlight" trong danh sách các lớp */
[class~="highlight"] {
background-color: yellow;
}
<p class="highlight special">Văn bản này sẽ có nền màu vàng.</p>
<p class="special highlight">Văn bản này cũng sẽ có nền màu vàng.</p>
<p class="special">Văn bản này sẽ không có nền màu vàng.</p>
6.8 Bộ chọn thuộc tính với phân cách dấu gạch ngang
Bộ chọn thuộc tính với phân cách dấu gạch ngang chọn các phần tử có thuộc tính chứa giá trị được chỉ định hoặc bắt đầu với giá trị được chỉ định, tiếp theo là một dấu gạch ngang.
Cú pháp:
[thuộc tính|="giá trị"] {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
p[lang|="ru"] {
font-style: italic;
}
<p lang="ru">Văn bản này sẽ nghiêng.</p>
<p lang="ru-RU">Văn bản này cũng sẽ nghiêng.</p>
<p lang="en">This text will not be italicized.</p>
GO TO FULL VERSION