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

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

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

Cú pháp bộ chọn kết thúc bằng giá trị thuộc tính:

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

Ví dụ về 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 (class) kết thúc bằng "-tertiary" */
[class$="-tertiary"] {
   background-color: lightcoral;
}

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

Ba nút được xác định với các giá trị thuộc tính class khác nhau.
Quy tắc CSS [class$="-tertiary"] chọn các phần tử có giá trị thuộc tính class kết thúc bằng "-tertiary". Quy tắc này áp dụng kiểu background-color: lightcoral; cho các nút đó.

Do đó, nút có giá trị thuộc tính class là "btn-tertiary" sẽ có màu nền đỏ san hô nhạt.

Thử thách

Dễ

Bạn được cung cấp một danh sách các bản nhạc trên một trang web. Mỗi bản nhạc được biểu diễn bằng một phần tử <div> có thuộc tính data-track cho biết định dạng của bản nhạc (ví dụ: "mp3", "wav", "flac"). Nhiệm vụ của bạn là tạo kiểu khác nhau cho các bản nhạc dựa trên định dạng bằng cách dùng bộ chọn giá trị thuộc tính kết thúc bằng.

Nhiệm vụ CSS của bạn là:

Đặt màu nền riêng cho các bản nhạc có giá trị thuộc tính data-track kết thúc bằng "mp3".
Đặt màu nền riêng cho các bản nhạc có giá trị thuộc tính data-track kết thúc bằng "wav".
Đặt màu nền riêng cho các bản nhạc có giá trị thuộc tính data-track kết thúc bằng "flac".

Tự làm thử

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Tracks</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-track="a-mp3">Track 1 (MP3)</div>
    <div data-track="a-wav">Track 2 (WAV)</div>
    <div data-track="a-flac">Track 3 (FLAC)</div>
    <div data-track="b-mp3">Track 4 (MP3)</div>
</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ác Bộ chọn giá trị thuộc tínhBộ chọn giá trị thuộc tính IIBộ 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