Bài 38: Cách sử dụng Attribute Selectors trong css

Cách sử dụng Attribute Selectors trong css

Cách sử dụng Attribute Selectors trong css

Attribute Selectors là kỹ thuật cho phép lựa chọn các phần tử HTML dựa trên thuộc tính của chúng. Với Attribute Selectors, bạn có thể lựa chọn các phần tử HTML dựa trên giá trị của thuộc tính, tên thuộc tính hoặc sự có mặt của thuộc tính.

Để sử dụng Attribute Selectors trong CSS, bạn có thể thực hiện theo các cú pháp sau:

1. Lựa chọn các phần tử có thuộc tính cụ thể:

[attribute] {
  /* styles here */
}

Ví dụ: Lựa chọn tất cả các đường link có thuộc tính target:

a[target] {
  color: red;
}

2. Lựa chọn các phần tử có thuộc tính và giá trị cụ thể:

[attribute=value] {
  /* styles here */
}

Ví dụ: Lựa chọn tất cả các đường link có thuộc tính target và giá trị là _blank:

a[target="_blank"] {
  color: red;
}

3. Lựa chọn các phần tử có thuộc tính và giá trị bắt đầu bằng chuỗi cụ thể:

[attribute^=value] {
  /* styles here */
}

Ví dụ: Lựa chọn tất cả các đường link có thuộc tính href và giá trị bắt đầu bằng chuỗi https:

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

4. Lựa chọn các phần tử có thuộc tính và giá trị kết thúc bằng chuỗi cụ thể:

[attribute$=value] {
  /* styles here */
}

Ví dụ: Lựa chọn tất cả các hình ảnh có thuộc tính src và giá trị kết thúc bằng .jpg:

img[src$=".jpg"] {
  border: 1px solid red;
}

5. Lựa chọn các phần tử có thuộc tính và giá trị chứa chuỗi cụ thể:

[attribute*=value] {
  /* styles here */
}

Ví dụ: Lựa chọn tất cả các đường link có thuộc tính href và chứa chuỗi example:

a[href*="example"] {
  color: red;
}

Lưu ý rằng Attribute Selectors có thể được kết hợp với các Selectors khác nhau để lựa chọn các phần tử HTML theo nhiều điều kiện khác nhau.