Chọn phần tử có thuộc tính chứa chuỗi - [attribute*=value] - trong CSS

Trong lĩnh vực thiết kế web và phát triển giao diện người dùng, một trong những khía cạnh quan trọng nhất là cách chúng ta lựa chọn và sắp xếp các phần tử HTML để tạo ra các trang web hấp dẫn và dễ sử dụng. CSS (Cascading Style Sheets) là công cụ mạnh mẽ giúp chúng ta làm điều đó. Trong bài viết này, chúng ta sẽ khám phá cách chọn các phần tử dựa trên thuộc tính của chúng chứa một chuỗi cụ thể, sử dụng cú pháp [attribute*=value].

Thuộc tính và giá trị trong HTML

Trước khi đi sâu vào cú pháp của CSS, hãy cùng xem qua một ví dụ cơ bản về thuộc tính và giá trị trong HTML:

<div class="container" data-type="example">Nội dung của tôi</div>

Trong ví dụ trên, phần tử <div> có thuộc tính class với giá trị là "container" và thuộc tính data-type với giá trị là "example". Chúng ta có thể dùng CSS để chấm dứt các thuộc tính này và thay đổi cách thức hiển thị của phần tử.

CSS Attribute Selectors

CSS cung cấp nhiều cách để chọn phần tử dựa trên thuộc tính của chúng. Một trong những cách hữu ích nhất là chọn phần tử mà giá trị của một thuộc tính cụ thể chứa chuỗi ký tự nào đó. Để làm được điều này, chúng ta sử dụng cú pháp [attribute*=value].

Cú pháp [attribute*=value]

• attribute: Đây là tên thuộc tính của phần tử mà bạn muốn chọn.
• *=: Đây là toán tử chứa, có nghĩa là kiểu chọn này sẽ tìm kiểm bất kỳ phần tử nào mà giá trị của nó chứa chuỗi ký tự được chỉ định.
• value: Đây là chuỗi ký tự bạn muốn tìm kiếm trong giá trị của thuộc tính.

Ví dụ cụ thể

Hãy xem một ví dụ cụ thể để minh họa cách sử dụng cú pháp này:

<ul>
    <li class="item-1 example-item">Item 1</li>
    <li class="item-2 test-item">Item 2</li>
    <li class="item-3 another-item">Item 3</li>
    <li class="item-4 example-test">Item 4</li>
</ul>

Giả sử bạn muốn chọn tất cả các phần tử <li> mà giá trị của thuộc tính class chứa chuỗi "item". Bạn có thể làm điều này bằng cách:

li[class*="item"] {
    background-color: yellow;
}

Kết quả là các phần tử <li> có class chứa chuỗi "item" sẽ có nền màu vàng.

Trường hợp phức tạp hơn

Bạn cũng có thể kết hợp nhiều thuộc tính hoặc chọn phần tử phức tạp hơn. Ví dụ:

<div data-info="user-info" class="card user-card">User 1</div>
<div data-info="account-info" class="card account-card">User 2</div>
<div data-detail="login-detail" class="login-card">User 3</div>

Nếu bạn muốn chọn các <div> mà data-info chứa "info" và class chứa "card", thì bạn có thể viết như sau:

div[data-info*="info"][class*="card"] {
    border: 2px solid red;
}

Kết quả là các phần tử theo điều kiện sẽ có viền màu đỏ.

Kết luận

CSS cung cấp rất nhiều công cụ mạnh mẽ để chọn và định kiểu các phần tử HTML. Sử dụng cú pháp [attribute*=value] cho phép bạn chọn phần tử dựa trên giá trị thuộc tính chứa một chuỗi cụ thể, giúp bạn linh hoạt hơn trong việc thiết kế giao diện người dùng. Bằng cách áp dụng đúng các công cụ này, bạn có thể tinh chỉnh và kiểm soát giao diện của trang web một cách hiệu quả.