Bộ chọn giá trị thuộc tính

Bài học 13 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Trong bài học này, bạn sẽ tìm hiểu khái niệm bộ chọn bắt đầu bằng giá trị thuộc tính. Kỹ thuật này cho phép bạn nhắm đến các phần tử HTML dựa trên những ký tự đầu tiên trong giá trị thuộc tính của chúng.

Cú pháp bộ chọn bắt đầu bằng giá trị thuộc tính:

Để nhắm đến các phần tử có giá trị thuộc tính bắt đầu bằng một chuỗi cụ thể, hãy dùng cú pháp bộ chọn [attribute^="value"].

Ví dụ code:

HTML:

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>

CSS:

/* Chọn các nút có giá trị thuộc tính lớp bắt đầu bằng "btn-" */
[class^="btn-"] {
   background-color: lightgray;
}

Trong các ví dụ code trên:

Ba nút được định nghĩa với các giá trị thuộc tính class khác nhau.
Quy tắc CSS [class^="btn-"] nhắm đến các phần tử có giá trị thuộc tính class bắt đầu bằng "btn-". Quy tắc này áp dụng kiểu background-color: lightgray; cho các nút đó.

Kết quả là cả ba nút đều có màu nền xám nhạt, vì giá trị thuộc tính class của chúng bắt đầu bằng "btn-".

Thử thách

Dễ

Hãy tưởng tượng bạn có cấu trúc HTML sau đây cho một danh sách mục. Mục tiêu của bạn là tạo kiểu cho các mục trong danh sách có giá trị thuộc tính data-category cụ thể bắt đầu bằng "fruit-". Dùng CSS để áp dụng màu nền riêng cho các mục này.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Value Starting With Selector</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <ul>
        <li data-category="fruit-apple">Apple</li>
        <li data-category="vegetable-carrot">Carrot</li>
        <li data-category="fruit-banana">Banana</li>
        <li data-category="fruit-orange">Orange</li>
        <li data-category="grain-rice">Rice</li>
    </ul>
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xácBộ chọn giá trị thuộc tínhBộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểu Bộ chọn lớp Bộ chọn ID Bộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử con Bộ chọn phần tử hậu duệ Bộ chọn phần tử anh em liền kề Bộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web