Attribute selectors là cách chọn các thành phần trong tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó, với Attribute selectors chúng ta có thể chọn được các đối tượng mà không cần phải khai báo thêm các Class hoặc Id vào trong thẻ HTML mà vẫn có thể hướng được đến các thành phần đó.
Ví dụ sau sẽ quy định tất cả các thành phần có thuộc tính title được tô màu đỏ
[title]{color: red}
Chúng ta có thể chỉ định chính xác một thành phần nào đó với Attribute selectors dựa vào giá trị của thuộc tính tính đó.
Ví dụ sau quy định tất cả các thành phần form có thuộc tính type=”text” được hiển thị với đường viền màu đỏ. Còn các thành phần type=”submit” không bị ảnh hưởng.
Mã HTML
<p>Email: <input type="text" name="email" /></p>
<p>Address <input type="text" name="address" /></p>
<p>Address <input type="submit" name="submit" /></p>
Mã CSS
input[type="text"]{border: 1px solid red}
Chúng ta có thể chọn nhiều thành phần dựa vào giá trị chung của một thuộc tính (Coi mỗi giá trị ngăn cách nhau bởi khoảng trắng), chúng ta cùng xem ví dụ sau:
Mã HTML:
<p title="irst paragraph">Đoạn văn thứ nhất</p>
<p title="second paragraph">Đoạn văn thứ hai</p>
<p title="other">Đoạn văn không bị ảnh hưởng</p>
Ta thấy 2 thành phần p thứ nhất và 2 với thuộc tính title có chung một giá trị là: paragraph, do đó ta có thể chọn được 2 thành phần p 1 và 2 dựa vào giá trị chung này và cho hiển thị với màu đỏ, ta viết CSS như sau:
p[title~=paragraph]{color: red}
Ví dụ sau sẽ chọn tất cả các thành phần p có thuộc tính title với giá trị chỉ định là pg, hoặc có giá trị dạng pg-giá trị khác (ngăn cách bởi dấu – )
<p title="pg">First</p>
<p title ="pg-second">Second</p>
<p title ="pg-three">Three</p>
<p title ="other">Other</p>
Mã CSS
p[title|=pg]{color: blue}
Kết quả là 3 đoạn văn bản đầu tiên được hiển thị với màu xanh.
Phần này chỉ đọc thôi thì rất khó hiểu, các bạn cứ làm nhiều rồi sẽ quen. Không phải lúc nào chúng ta cũng sử dụng hết những quy tắc ở đây, nhưng biết được những quy tắc này, bạn có thể viết CSS cho các thành phần mà không cần phải thêm Class hay ID vào trong các thẻ HTML, giúp code HTML gọn gàng hơn và mạch lạc hơn (Clean HTML).