Selector thuộc tính trong CSS

Có rất nhiều kiểu Selector khác nhau trong CSS, với tôi Selector thuộc tính là cái vô cùng thú vị. Bởi vì khi mới học bạn sẽ thấy mình ít dùng nó, nhưng khi học nâng cao hơn thì ngược lại, và đôi khi nhờ nó bạn đỡ tốn thời gian tạo id hoặc class mới.

---

Code mẫu

CSS:

[type="text"] {background-color:yellow;}

---

HTML:

<form>
<label>Họ và tên: </label><input type="text"><br />
<label>Email: </label><input type="email">
</form>

---

Kết quả:

Họ và tên:
Email:

---

Cách dùng

Về cơ bản ý tưởng về selector thuộc tính rất đơn giản, thay vì dùng id hay class để xác định đối tượng cần tác động CSS, chúng ta dùng ngay các thuộc tính của đối tượng đó để định danh.

---

Ví dụ khác

HTML:

<a href="https://kiencang.net" title="Nguyễn Đức Anh"><img src="images/ducanh.jpg"></a>

---

CSS:

[title="Nguyễn Đức Anh"] {margin-left:20%;}

---

Kết quả:

---

Danh sách bộ chọn

• Selector :before;
• Selector thuộc tính (bài bạn đang đọc);
• Lớp giả (ví dụ first-letter);
• Id và Class;
• Selector :after;
• Tổng hợp các Selector;