Chọn phần tử có thuộc tính kết thúc bằng chuỗi - [attribute$=value] - trong CSS

Trong quá trình tạo và thiết kế trang web, việc chọn đúng phần tử là công việc cực kỳ quan trọng. Một trong những cách tiếp cận mạnh mẽ và dễ dàng hơn là sử dụng CSS Selectors. Đặc biệt, selector cho phép chọn các phần tử có thuộc tính kết thúc bằng một chuỗi cụ thể được biểu thị bằng cú pháp [attribute$=value]. Điều này giúp tăng cường khả năng tùy biến và thao tác với những phần tử cụ thể hơn trên trang web.

Cú pháp [attribute$=value]

Cú pháp [attribute$=value] giúp bạn chọn các phần tử dựa trên giá trị của thuộc tính kết thúc bằng một chuỗi cụ thể. Để hiểu rõ hơn, chúng ta cùng xem cú pháp đầy đủ:

[attribute$="value"] {
    /* Các thuộc tính CSS cần thao tác */
}

Trong đó:

• attribute là tên thuộc tính của phần tử mà bạn muốn chọn.
• value là chuỗi kết thúc mà thuộc tính đó phải có.

Ví dụ Cụ Thể

Hãy cùng xem xét một vài ví dụ để hiểu rõ hơn về cách sử dụng [attribute$=value] trong thực tế.

Ví dụ 1: Chọn các liên kết (.jpg)

Giả sử bạn muốn tất cả các liên kết hình ảnh có phần mở rộng .jpg có một kiểu dáng nhất định:

a[href$=".jpg"] {
    border: 2px solid blue;
}

Trong đoạn mã trên, tất cả các thẻ a có thuộc tính href kết thúc bằng .jpg sẽ có đường viền màu xanh dương dày 2px.

Ví dụ 2: Chọn các phần tử hình ảnh theo định dạng

Nếu bạn có nhiều hình ảnh trên trang web với các định dạng khác nhau (.png, .gif, v.v.), và bạn muốn áp dụng một số kiểu dáng riêng cho những hình ảnh .png:

img[src$=".png"] {
    border-radius: 10px;
    box-shadow: 0px 0px 5px #000;
}

Đoạn mã trên sẽ chọn tất cả các thẻ img với thuộc tính src kết thúc bằng .png, và áp dụng kiểu bo tròn các góc cùng với hiệu ứng đỗ bóng.

Sự Khác Biệt Giữa Các CSS Selectors

Cũng cần phải phân biệt [attribute$=value] với các selector khác như [attribute^=value] và [attribute*=value]:

• [attribute^=value]: Chọn các phần tử có thuộc tính bắt đầu bằng giá trị cụ thể.
• [attribute*=value]: Chọn các phần tử có thuộc tính chứa giá trị cụ thể.

Ví dụ:

a[href^="https"] {
    color: green;
}

a[href*="example"] {
    font-weight: bold;
}

Ứng Dụng Thực Tế

Ứng dụng của [attribute$=value] rất phổ biến trong việc tùy biến trải nghiệm tương tác của người dùng trên trang web. Chúng ta có thể sử dụng nó để chọn các phần tử form, liên kết hoặc bất kỳ phần tử nào dựa trên cấu trúc thuộc tính cụ thể.

Ví dụ: bạn có một biểu mẫu và muốn chọn tất cả các trường email để áp dụng một phong cách nhất định:

input[type$="email"] {
    background-color: lightgray;
    padding: 10px;
}

Kết Luận

Việc sử dụng CSS Selectors một cách sáng tạo và hiệu quả có thể giúp bạn quản lý và tạo kiểu dáng cho trang web một cách dễ dàng hơn. Selector [attribute$=value] là một công cụ mạnh mẽ trong bộ công cụ CSS của bạn, cho phép bạn dễ dàng áp dụng kiểu dáng cụ thể cho các phần tử dựa trên giá trị kết thúc của thuộc tính. Điều này sẽ giúp bạn tối ưu hóa mã CSS, duy trì sự nhất quán và cải thiện trải nghiệm người dùng một cách đáng kể.