Tự học CSS - Bài 31 - Chọn đối tượng qua thuộc tính

 Chúng ta hoàn toàn có thể định dạng các phần tử HTML theo thuộc tính hay giá trị thuộc tính đặc biệt.

[attribute]

Chọn qua [attribute] nghĩa là chọn đối tượng thông qua thuộc tính.

Ví dụ sau chọn tất cả thẻ <a> có thuộc tính target

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

 

[attribute=”value”]

Chọn qua [attribute=”value”] nghĩa là chọn phần tử có thuộc tính bằng giá trị nào đó.

Ví dụ sau chọn tất cả thẻ <a> có thuộc tính target="_blank"

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

[attribute~=”value”]

Dùng để chọn phần tử với 01 giá trị thuộc tính có chứa từ nhất định.

Ví dụ sau chọn tất cả phần tử có thuộc tính title chứa danh sách các chữ ngăn cách nhau bằng khoảng trắng, 01 trong các chữ đó là “flower”

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

Ví dụ trên sẽ khớp với các phần tử có title="flower", title="summer flower" và title="flower new" nhưng không phải là title="my-flower" hay title="flowers"

 

[attribute|=”value”]

Dùng để chọn phần tử có thuộc tính chính xác là 01 giá trị nào đó hay theo sau giá trị là 01 dấu “-“

Ghi chú: giá trị phải là nguyên 01 chữ như class="top" hoặc thêm dấu “-“ phía sau như class="top-text"

Ví dụ:

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

 

[attribute^=”value”]

Chọn các phần tử có thuộc tính chứa giá trị bắt đầu bằng 01 chữ nào đó.

Ví dụ sau sẽ chọn tất cả phần tử có giá trị thuộc tính class bắt đầu bằng chữ “top”

Ghi chú: giá trị không cần phải là nguyên 01 từ!

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

 

[attribute$=”value”]

Chọn các phần tử có giá trị chứa phần kết thúc là 01 chữ nào đó.

Ví dụ sau chọn tất cả các lớp kết thúc là chữ “test”

Ghi chú: giá trị không cần phải là nguyên 01 từ.

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

 

[attribute*=”value”]

Chọn các phần tử có thuộc tính có giá trị chứa từ nào đó.

Ví dụ sau sẽ chọn tất cả phần tử có thuộc tính class chứa giá trị có từ “te”

Ghi chú: giá trị không cần là cả 01 từ!

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

 

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

Việc chọn theo thuộc tính có thể hữu ích trong việc định dạng biểu mẫu mà không cần klhai báo class hay ID

Ví dụ:

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

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

Tất cả cách chọn qua thuộc tính trong CSS

Chọn qua	Ví dụ	Giải thích ví dụ
[attribute]	[target]	Chọn tất cả phần tử có thuộc tính target
[attribute=value]	[target=_blank]	Chọn tất cả phần tử có target="_blank"
[attribute~=value]	[title~=flower]	Chọn tất cả phần tử có thuộc tính title  chứa chữ "flower"
[attribute|=value]	[lang|=en]	Chọn tất cả phần tử có giá trị thuộc tính lang bắt đầu bằng chữ "en"
[attribute^=value]	a[href^="https"]	Chọn tất cả phần tử <a> có giá trị thuộc tính href bắt đầu bằng chữ "https"
[attribute$=value]	a[href$=".pdf"]	Chọn tất cả phần tử <a> có giá trị thuộc tính href kết thúc là chữ ".pdf"
[attribute*=value]	a[href*="lophocvitinh"]	Chọn tất cả phần tử <a> có giá trị thuộc tính href chứa  chữ "lophocvitinh"

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Xem MỤC LỤC BÀI VIẾT VỀ CSS

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Sưu tầm bởi #drM