Các vùng chọn thuộc tính trong CSS

Định dạng phần tử HTML với thuộc tính

Có thể định dạng các phần tử HTML có xác định thuộc tính hoặc giá trị thuộc tính.

Vùng chọn [attribute]

Vùng chọn [attribute] được sử dụng để chọn các phần tử có thuộc tính được chỉ định. Ví dụ sau chọn tất cả các phần tử <a> với thuộc tính đích:

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

Vùng chọn [attribute=”value”]

Vùng chọn [attribute=”value”] được sử dụng để chọn các phần tử có thuộc tính và giá trị được chỉ định. Ví dụ sau 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;
}

Vùng chọn [attribute~=”value”]

Vùng chọn [attribute~=”value”] được sử dụng để chọn các phần tử có giá trị thuộc tính chứa một từ đã chỉ định.

Ví dụ sau chọn tất cả các phần tử có thuộc tính tiêu đề có chứa một danh sách các từ được cách nhau bởi dấu cách, một trong số đó là “flower”:

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

Ví dụ trên sẽ chọn phần tử phù hợp là title=”flower”, title=”summer flower”, và title=”flower new”, nhưng không chọn title=”my-flower” hay title=”flowers”.

Vùng chọn [attribute|=”value”]

Vùng chọn [attribute|=”value”] được sử dụng để chọn các phần tử với thuộc tính được chỉ định bắt đầu với giá trị được chỉ định. Ví dụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng “top”.

Lưu ý: Giá trị phải là toàn bộ từ, hoặc là từ đơn, như class = “top”, hoặc theo sau bởi một dấu nối (-), như class = “top-text”!

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

Vùng chọn [attribute^=”value”]

Vùng chọn [attribute^=”value”] được sử dụng để chọn các phần tử có giá trị thuộc tính bắt đầu với một giá trị được chỉ định. Ví dụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp bắt đầu bằng “top”.

Lưu ý: Giá trị không phải là toàn bộ từ!

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

Vùng chọn [attribute$=”value”]

Vùng chọn [attribute$=”value”] được sử dụng để chọn các phần tử có giá trị thuộc tính kết thúc với một giá trị được chỉ định. Ví dụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp kết thúc bằng “test”.

Lưu ý: Giá trị không phải là toàn bộ từ!

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

Vùng chọn [attribute*=”value”]

Vùng chọn [attribute*=”value”] được sử dụng để chọn các phần tử có giá trị thuộc tính chứa một giá trị được chỉ định. Ví dụ sau chọn tất cả các phần tử có giá trị thuộc tính lớp có chứa “te”.

Lưu ý: Giá trị không phải là toàn bộ từ!

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

Định dạng các biểu mẫu

Các vùng chọn thuộc tính có thể hữu dụng để định dạng biểu mẫu không có class hoặc ID:

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

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