Trong phát triển web hiện đại, việc làm chủ các loại selector trong CSS giúp bạn tối ưu hóa giao diện, tăng trải nghiệm người dùng và nâng cao hiệu suất code. Tag name, class, id,... thường là những selector được sử dụng nhiều nhất. Trong số đó, hai nhóm selector mạnh mẽ và phổ biến là Attribute Selectors (bộ chọn thuộc tính) và Pseudo-class Selectors (bộ chọn lớp giả), giúp bạn kiểm soát chi tiết từng phần tử HTML mà không cần lạm dụng class hoặc id.
1. Attribute Selectors (Bộ Chọn Thuộc Tính)
Attribute selectors cho phép bạn chọn phần tử dựa trên thuộc tính hoặc giá trị thuộc tính, rất linh hoạt khi styling các thành phần động hoặc tự sinh.
Các loại Attribute Selector:
- [attribute] : Chọn phần tử có thuộc tính cụ thể
ví dụ chọn tất cả thẻ <a> có thuộc tính target:
a[target] { }
- [attribute="value"]: Chọn phần tử có thuộc tính với giá trị chính xác
ví dụ chọn tất cả input có type="text":
input[type="text"] { }
- [attribute~="value"]: Chọn phần tử có thuộc tính chứa từ cụ thể trong danh sách các từ
ví dụ chọn các div có class chứa từ "featured" trong danh sách:
div[class~="featured"] { }
- [attribute|="value"]: Chọn phần tử có thuộc tính bắt đầu bằng giá trị hoặc giá trị
ví dụ chọn các thẻ p có lang là "en" hoặc bắt đầu bằng "en-" như "en-US":
p[lang|="en"] { }
- [attribute^="value"]: Chọn phần tử có thuộc tính bắt đầu bằng chuỗi cụ thể
ví dụ chọn liên kết bắt đầu bằng "https":
a[href^="https"] { }
- [attribute$="value"]: Chọn phần tử có thuộc tính kết thúc bằng chuỗi cụ thể
ví dụ chọn hình ảnh có đường dẫn kết thúc bằng ".jpg":
img[src$=".jpg"] { }
- [attribute*="value"]: Chọn phần tử có thuộc tính chứa chuỗi cụ thể
ví dụ chọn liên kết chứa "khainguyen" trong URL:
a[href*="khainguyen"] { }
2. Pseudo-class Selectors (Bộ Chọn Lớp Giả)
Pseudo-class selectors giúp bạn chọn phần tử dựa trên trạng thái, vị trí hoặc đặc điểm động của chúng, cực kỳ hữu ích để styling tương tác và cấu trúc DOM.
Các loại Pseudo-class Selector cơ bản:
- :hover, :active, :focus, :visited
ví dụ đổi màu liên kết khi hover, đổi màu nền nút khi nhấn, đổi viền input khi focus, đổi màu liên kết đã truy cập:
a:hover { color: red; }
button:active { background: #ccc; }
input:focus { outline: 2px solid blue; }
a:visited { color: purple; }
- :first-child, :last-child, :nth-child(n), :not(selector)
ví dụ làm đậm phần tử đầu tiên, bỏ viền dưới phần tử cuối, tô màu dòng chẵn trong bảng, chọn thẻ p không có class "special":
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
tr:nth-child(even) { background: #f9f9f9; }
p:not(.special) { color: gray; }
Một số pseudo-class phổ biến khác:
- :checked – Chọn input đã được chọn
- :disabled, :enabled – Chọn input bị disable/enable
- :required, :optional – Chọn input bắt buộc/không bắt buộc
- :empty – Chọn phần tử không có con
- :first-of-type, :last-of-type, :only-child – Chọn phần tử theo vị trí đặc biệt trong nhóm cùng loại.
Kết luận
Việc nắm vững Attribute Selectors và Pseudo-class Selectors giúp bạn viết CSS linh hoạt, tối ưu và dễ bảo trì hơn, đồng thời nâng cao trải nghiệm người dùng và hiệu quả SEO cho website của mình. Hãy thực hành thường xuyên với các ví dụ trên để làm chủ CSS selector trong mọi dự án web nhé!
