Chọn phần tử có giá trị thuộc tính chứa từ - [attribute~=value] - trong CSS

CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ dùng để mô tả cách hiển thị các phần tử trên trang web. Nó giúp tạo ra giao diện đồng nhất, trực quan và phong cách cho các trang web. Một trong những tính năng mạnh mẽ của CSS là khả năng chọn các phần tử dựa trên thuộc tính và giá trị của chúng. Có nhiều cách để thực hiện điều này và một phương pháp cụ thể là sử dụng công thức chọn phần tử với giá trị thuộc tính chứa từ nào đó.

Cú pháp CSS [attribute~=value] cho phép chọn các phần tử có giá trị của thuộc tính chứa từ cụ thể nào đó. Đây là một công cụ cực kỳ mạnh mẽ khi bạn muốn áp dụng phong cách cho các phần tử có giá trị thuộc tính nhất định mà chứa từ hoặc cụm từ nhất định.

Cú Pháp và Ví Dụ

Cú pháp cơ bản của đoạn mã CSS này như sau:

[attribute~=value] {
    /* Các quy tắc CSS áp dụng cho phần tử */
}

Trong đó:

• attribute là tên thuộc tính của phần tử.
• value là từ hoặc cụm từ mà bạn muốn kiểm tra sự tồn tại trong thuộc tính đó.

Giả sử chúng ta có một đoạn mã HTML như sau:

<p class="note important">Chú ý quan trọng!</p>
<p class="note">Chỉ là một ghi chú.</p>
<p class="important">Cũng rất quan trọng!</p>

Nếu bạn muốn áp dụng một kiểu dáng chỉ cho các phần tử có class chứa từ "important", bạn có thể sử dụng đoạn CSS sau:

[class~=important] {
    color: red;
    font-weight: bold;
}

Kết quả là, các phần tử <p> có class chứa từ "important" sẽ hiển thị chữ màu đỏ và in đậm. Điều này áp dụng cho cả <p class="note important"> và <p class="important">, nhưng không áp dụng cho <p class="note">.

Lợi Ích Của [attribute~=value]

1. Linh Hoạt và Chính Xác: Công cụ này giúp bạn áp dụng các kiểu dáng với độ chính xác cao mà không cần thay đổi cấu trúc HTML.
2. Tăng Tính Khả Duyệt: Khi làm việc với các biểu mẫu hoặc trang web động, nơi mà thuộc tính có nhiều giá trị, công cụ chọn này rất hữu ích.
3. Dễ Hiểu và Dễ Sử Dụng: Cú pháp của selector này đơn giản và dễ nhớ, giúp các nhà phát triển dễ dàng thao tác và hiểu mã CSS của mình.

Các Sử Dụng Khác

Ngoài class, bạn có thể áp dụng công cụ chọn này cho bất kỳ thuộc tính nào khác như title, alt, rel, và hơn thế nữa. Ví dụ, đối với thuộc tính title:

[title~=tutorial] {
    background-color: yellow;
}

Các phần tử có thuộc tính title chứa từ "tutorial" sẽ có nền màu vàng.

Hạn Chế

Mặc dù attribute~=value rất hữu ích, nó có một số hạn chế:

• Nó chỉ kiểm tra các từ nguyên, tức là nó tìm kiếm các chuỗi được phân tách bằng khoảng trắng.
• Hiệu suất có thể bị ảnh hưởng nếu bạn áp dụng phong cách này cho một số lượng lớn các phần tử trên trang.

Sử dụng [attribute~=value] một cách hợp lý sẽ giúp bạn tạo ra các trang web gọn gàng, dễ bảo trì và đáp ứng tốt nhu cầu về phong cách. Đây là một công cụ hữu ích trong hộp công cụ của bất kỳ nhà phát triển web nào, giúp tăng cường khả năng kiểm soát và tùy biến giao diện người dùng.