Cách chọn phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS, Cách xác định phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS, CSS Attribute Selectors

Cách chọn phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS, Cách xác định phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS, CSS Attribute Selectors

Cách chọn phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS

Ở bài hướng dẫn này, bạn sẽ được tìm hiểu cách chọn ra các phần tử dựa theo:

  • Tên thuộc tính của phần tử
  • Giá trị thuộc tính của phần tử

Bộ chọn [attribute]

Bộ chọn [attribute] dùng để chọn ra các phần tử có chứa thuộc tính được chỉ định.

Ví dụ

Đoạn mã dưới đây dùng để chọn:

  • Các phần tử <div> có chứa thuộc tính class
  • Các phần tử có chứa thuộc tính id
  • Các phần tử <img> có chứa thuộc tính width

div[class]{
    border: 5px solid  red;
}
[id]{
    border: 5px solid  green;
}
img[width]{
    border: 5px solid  blue;
}

Bộ chọn [attribute="value"]

Bộ chọn [attribute="value"] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị được chỉ định.

Ví dụ

Đoạn mã dưới đây dùng để chọn:

  • Các phần tử <div> có chứa thuộc tính class với giá trị a
  • Các phần tử có chứa thuộc tính id với giá trị c
  • Các phần tử <img> có chứa thuộc tính width với giá trị 150px

div[class="a"]{
    border: 5px solid  red;
}
[id="c"]{
    border: 5px solid  green;
}
img[width="150px"]{
    border: 5px solid  blue;
}

Bộ chọn [attribute^="value"]

Bộ chọn [attribute^="value"] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải được bắt đầu bằng các ký tự được chỉ định

Ví dụ

Chọn ra các phần tử có chứa thuộc tính class với giá trị của thuộc tính class phải được bắt đầu bằng abc


[class^="abc"]{
    border: 5px solid  red;
}

Bộ chọn [attribute$="value"]

Bộ chọn [attribute$="value"] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải được kết thúc bằng các ký tự được chỉ định

Ví dụ

Chọn ra các phần tử có chứa thuộc tính class với giá trị của thuộc tính class phải được kết thúc bằng abc


[class$="abc"]{
    border: 5px solid  red;
}

Bộ chọn [attribute~="value"]

Bộ chọn [attribute~="value"] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải chứa MỘT TỪ được chỉ định.

Ví dụ

Chọn các phần tử có chứa thuộc tính class với giá tị của thuộc tính class phải chứa TỪ abc


[class~="abc"]{
    border: 5px solid red;
}

Bộ chọn [attribute*="value"]

Bộ chọn [attribute*="value"] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải chứa CÁC KÝ TỰ được chỉ định.

Ví dụ

Chọn các phần tử có chứa thuộc tính class với giá tị của thuộc tính class phải chứa KÝ TỰ abc


[class*="abc"]{
    border: 5px solid red;
}

Bộ chọn [attribute|="value"]

Bộ chọn [attribute|="value"] dùng để chọn ra các phần tử có chứa thuộc tính với giá trị của thuộc tính đó phải được bắt đầu bằng các ký tự được chỉ định (phía sau nó phải là dấu gạch nối nếu còn tồn tại các ký tự khác)

Ví dụ

Chọn ra các phần tử có chứa thuộc tính class với giá trị của thuộc tính class phải được bắt đầu bằng abc (phía sau nó là dấu gạch nối nếu còn tại các ký tự khác)


[class|="abc"]{
    border: 5px solid  red;
}

Cách chọn phần tử dựa theo thuộc tính và giá trị thuộc tính trong CSS

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi