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

Bài học 15 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 kiểm tra giá trị thuộc tính có chứa chuỗi con. Kỹ thuật này cho phép bạn chọn các phần tử HTML dựa trên việc giá trị thuộc tính của chúng có chứa một chuỗi con cụ thể hay không.

Cú pháp bộ chọn giá trị thuộc tính có chứa:

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

Ví dụ code:

HTML:

<div class="tag fruit">Apple</div>
<div class="tag vegetable">Carrot</div>
<div class="tag fruit">Banana</div>
<div class="tag fruit">Orange</div>
<div class="tag grain">Rice</div>

CSS:

/* Chọn các phần tử <div> có giá trị thuộc tính class chứa "fruit" */
[class*="fruit"] {
   color: green;
}

Giải thích ví dụ code:

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

Năm phần tử <div> được định nghĩa với các giá trị thuộc tính class khác nhau.
Quy tắc CSS [class*="fruit"] chọn các phần tử có giá trị thuộc tính class chứa chuỗi con "fruit". Quy tắc này áp dụng kiểu color: green; cho các phần tử đó.

Do đó, các phần tử <div<strong>></strong> có thuộc tính class là "tag fruit" sẽ có màu chữ xanh lá cây.

Thử thách

Dễ

Bạn cần tạo kiểu cho danh sách sản phẩm trên một trang web. Mỗi sản phẩm được biểu diễn bằng phần tử <div> có thuộc tính data-tags cho biết các thẻ của sản phẩm (ví dụ: "electronics", "clothing", "accessories"). Mục tiêu của bạn là tạo kiểu khác nhau cho các sản phẩm dựa trên thẻ của chúng bằng bộ chọn chứa giá trị thuộc tính.

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

Đặt màu nền riêng cho các sản phẩm có thuộc tính data-tags chứa "electronics".
Đặt đường viền riêng cho các sản phẩm có thuộc tính data-tags chứa "clothing".
Đặt màu nền riêng cho các sản phẩm có thuộc tính data-tags chứa "accessories".

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>Product List</title>
    <style>
        /* Your CSS code here */
    </style>
</head>
<body>
    <div data-tags="electronics">Smartphone</div>
    <div data-tags="clothing">T-Shirt</div>
    <div data-tags="accessories">Sunglasses</div>
    <div data-tags="electronics clothing">Headphones</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ính Bộ 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