CSS [attribute] Selector
[attribute] selector được sử dụng để chọn các element có attribute được chỉ định.
Ví dụ sau chọn tất cả element <a> có target attribute:
a[target] { background-color: yellow; }
CSS [attribute="value"] Selector
[attribute="value"] selector được sử dụng để chọn các element có attribute và giá trị được chỉ định.
Ví dụ sau chọn tất cả element <a> có attribute target = "_ blank":
a[target="_blank"] { background-color: yellow; }
CSS [attribute~="value"] Selector
[attribute~="value"] selector được sử dụng để chọn các element có giá trị attribute chứa một từ được chỉ định.
[title~="flower"] { border: 5px solid yellow; }
Ví dụ trên sẽ khớp với các element với title="flower", title="summer flower", và title="flower new", nhưng không trùng title="my-flower" hoặc title="flowers".
CSS [attribute|="value"] Selector
[attribute|="value"] selector được sử dụng để chọn các element có attribute được chỉ định, mà giá trị của nó có thể chính xác là giá trị được chỉ định hoặc giá trị được chỉ định theo sau bởi dấu gạch ngang (-)
Lưu ý: Giá trị phải là một từ nguyên vẹn, như class = "top" hoặc theo sau là dấu gạch ngang (-), như class = "top-text".
[class|="top"] { background: yellow; }
CSS [attribute^="value"] Selector
[attribute^="value"] selector được sử dụng để chọn các element có attribute được chỉ định, có giá trị bắt đầu bằng giá trị được chỉ định.
Ví dụ sau chọn tất cả các element có giá trị attribute class bắt đầu bằng "top":
Lưu ý: Giá trị không nhất thiết phải là một từ nguyên vẹn!
[class^="top"] { background: yellow; }
CSS [attribute$="value"] Selector
[attribute$="value"] selector được sử dụng để chọn các element có giá trị attribute kết thúc bằng một giá trị được chỉ định.
Ví dụ sau chọn tất cả các element có giá trị attribute class kết thúc bằng "test":
Lưu ý: Giá trị không nhất thiết phải là một từ nguyên vẹn!
[class$="test"] { background: yellow; }
CSS [attribute*="value"] Selector
[attribute*="value"] selector được sử dụng để chọn các element có giá trị attribute chứa một giá trị được chỉ định.
Ví dụ sau chọn tất cả các element có giá trị attribute class có chứa "te":
Lưu ý: Giá trị không nhất thiết phải là một từ nguyên vẹn!
[class*="te"] { background: yellow; }
Styling Forms
Các attribute selector có thể hữu ích cho việc tạo kiểu cho các form 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; }