×

Chọn phần tử có thuộc tính xác định - [attribute] - trong CSS

Avatar of admin
admin 2 Views

CSS là một ngôn ngữ quan trọng trong việc xây dựng và thiết kế giao diện trang web. Một trong những tính năng hữu ích của CSS là khả năng chọn các phần tử dựa trên các thuộc tính của chúng. Việc chọn phần tử theo thuộc tính giúp nhà phát triển dễ dàng định kiểu cho các phần tử mà không cần sử dụng thêm lớp hoặc ID.

Khi sử dụng CSS để chọn các phần tử dựa trên thuộc tính cụ thể, cú pháp cơ bản là sử dụng dấu ngoặc vuông. Dưới đây là một số ví dụ và cách ứng dụng của phương pháp này.

Chọn Theo Thuộc Tính

Để chọn phần tử có một thuộc tính cụ thể, sử dụng cú pháp:

[attribute]

Ví dụ:

[input]

Lựa chọn này sẽ ảnh hưởng đến tất cả các thẻ input trong trang web.

Chọn Theo Giá Trị Thuộc Tính

Nếu bạn muốn chọn các phần tử có giá trị cụ thể cho thuộc tính, sử dụng cú pháp:

[attribute="value"]

Ví dụ:

[type="text"]

Với lựa chọn trên, chỉ các thẻ input có thuộc tính type bằng text sẽ bị ảnh hưởng.

Chọn Theo Từ Khoá

CSS cũng cho phép chọn phần tử chứa từ khoá cụ thể trong giá trị của thuộc tính. Để làm điều này, có một số cú pháp tiện lợi:

  1. Chứa một từ khoá (~=):

    [attribute~="word"]

    Ví dụ:

    [title~="flower"]

    Cú pháp này sẽ ảnh hưởng đến các phần tử có thuộc tính title chứa từ khoá "flower".

  2. Bắt đầu bằng từ khoá (^=):

    [attribute^="start"]

    Ví dụ:

    [href^="https"]

    Lựa chọn này áp dụng cho các liên kết (<a>) bắt đầu với chuỗi "https".

  3. Kết thúc bằng từ khoá ($=):

    [attribute$="end"]

    Ví dụ:

    [src$=".jpg"]

    Chỉ các hình ảnh (thẻ img) có đường dẫn kết thúc bằng ".jpg" mới bị ảnh hưởng.

  4. Chứa chuỗi con (*=):

    [attribute*="part"]

    Ví dụ:

    [class*="button"]

    Tất cả các phần tử có lớp chứa chuỗi "button" sẽ được áp dụng kiểu.

Chọn Theo Thuộc Tính Không Có Giá Trị

Đôi khi bạn cần chọn các phần tử mà đơn giản chỉ có thuộc tính mà không quan tâm đến giá trị của nó. Cú pháp cho lựa chọn này là:

[attribute]

Ví dụ:

[checked]

Thẻ input với thuộc tính checked sẽ bị áp dụng kiểu, thường được dùng cho các hộp chọn (checkbox) hoặc nút chọn (radio).

Kết Hợp Với Các Bộ Chọn Khác

Kết hợp các bộ chọn thuộc tính với các bộ chọn khác là cách hiệu quả để tạo ra các lựa chọn kiểu phức tạp hơn.

  1. Với loại phần tử (element[attribute]):

    input[required]

    Chỉ ảnh hưởng đến các thẻ input có thuộc tính required.

  2. Với lớp (.class[attribute]):

    .form-control[disabled]

    Affects only elements with both the form-control class and the disabled attribute.

  3. Với ID (#id[attribute]):

    #username[readonly]

    Chỉ ảnh hưởng đến phần tử có ID "username" và thuộc tính readonly.

Kết Luận

Lựa chọn phần tử dựa trên thuộc tính trong CSS là một công cụ mạnh mẽ giúp nhà phát triển áp dụng các kiểu dáng cụ thể mà không cần thêm các lớp hoặc ID không cần thiết. Việc hiểu và ứng dụng thành thạo các cú pháp chọn theo thuộc tính giúp tối ưu hóa mã CSS và làm cho việc quản lý và bảo trì dễ dàng hơn.

Comments

Bài viết liên quan