Bài 35: Bộ chọn thuộc tính trong CSS

Tạo kiểu cho phần tử HTML với thuộc tính cụ thể

Nó có thể tạo kiểu cho phần tử HTML đó có thuộc tính hoặc giá trị thuộc tính cụ thể.

Bộ chọn [attribute]

Bộ chọn [attribute] được sử dụng để chọn phần tử với thuộc tính được xác định.
Trong ví dụ này, chọn tất cả các phần tử <a> với thuộc tính xác định:

a[target] {
  background-color: yellow;
}

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

Bộ chọn [attribute="value"] sử dụng để chọn phần tử với thuộc tính và giá trị xác định.
Trong ví dụ này, chọn tất cả các phần tử <a> với thuộc tính target=”_blank”:

a[target="_blank"] {
  background-color: yellow;
}

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

Bộ chọn [attribute~="value"] sử dụng để chọn phần tử với giá trị thuộc tính chứa một từ được xác định.
Trong ví dụ này, chọn tất cả các phần tử với thuộc tính tiêu đề chứa danh sách các từ được ngăn cách, một trong số đó là “flower”:

[title~="flower"] {
  border: 5px solid yellow;
}

Ví dụ trên sẽ phù hợp với phần tử có title=”flower”, title=”flower” và title=”flower new”, nhưng không phù hợp với title=”my-flower” hoặc title=”flowers”.

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

Bộ chọn [attribute|="value"] sử dụng để chọn phần tử với thuộc tính được xác định bắt đầu với giá trị được xác định.
Trong ví dụ này, sẽ chọn tất cả các phần tử với thuộc tính class bắt đàu với “top”:
Chú ý: Giá trị phải là từ đơn, độc lập, như class=”top”, hoặc đi theo sau dấu gạch nối (-), như like class=”top-text” !

[class|="top"] {
  background: yellow;
}

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

Bộ chọn [attribute^="value"] sử dụng để chọn phần tử mà giá trị thuộc tính bắt đầu với giá trị xác định.
Trong ví dụ này, chọn tất cả các phần tử với thuộc tính class bắt đầu với “top”:
Chú ý: Giá trị không nhất thiết phải là một từ !

[class^="top"] {
  background: yellow;
}

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

Bộ chọn [attribute$=”value”] sử dụng để chọn các phần tử mà giá trị thuộc tính kết thúc với giá trị xác định.
Trong ví dụ này, chọn tất cả các phần tử với thuộc tính class kết thúc là “test”:
Chú ý: Giá trị không nhất thiết phải là một từ !

[class$="test"] {
  background: yellow;
}

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

Bộ chọn [attribute*=”value”] sử dụng để chọn phần tử mà thuộc tính chứa giá trị được xác định.
Trong ví dụ này, chọn tất cả các phần tử với thuộc tính class chứ “te”:
Chú ý: Giá trị không nhất thiết phải là một từ !

[class*="te"] {
  background: yellow;
}

Định dạng style

Bộ chọn thuộc tính có thể dùng cho các mẫu tạo kiểu không có class hoặc ID:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Tổng hợp các bộ chọn thuộc tính trong CSS

Selector	Ví dụ	Mô tả ví dụ
[attribute]	[target]	Chọn tất cả các phần tử với thuộc tính target
[attribute=value]	[target=_blank]	Chọn tất cả các phần tử với target=”_blank”
[attribute~=value]	[title~=flower]	Chọn tất cả các phần tử với thuộc tính tiêu đề chứa từ “flower”
[attribute|=value]	[lang|=en]	Chọn tất cả các phần tử với giá trị thuộc tính lang bắt đầu là “en”
[attribute^=value]	a[href^=”https”]	Chọn mọi phần tử <a> có giá trị thuộc tính href bắt đầu với “https”
[attribute$=value]	a[href$=”.pdf”]	Chọn mọi phần tử <a> có giá trị thuộc tính href kết thúc với “.pdf”
[attribute*=value]	a[href*=”w3schools”]	Chọn mọi phần tử <a> có giá trị thuộc tính href chứa chuỗi “w3schools”