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ị.

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, chúng ta dùng ngay các thuộc tính của đối tượng đó để định danh.

Các ví dụ khác

HTML:

<a href="http://www.mangluoitoancau.com" title="Nguyễn Đức Anh"><img src="images/ducanh.jpg"></a>

CSS:

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

Kết quả: