Bạn đang học CSS nhưng vẫn mơ hồ CSS Selector là gì và vì sao nó lại quan trọng đến vậy? Đừng lo — đây chính là “chìa khóa” giúp bạn điều khiển chính xác từng phần tử HTML chỉ với vài dòng mã. Bài viết này sẽ giúp bạn hiểu rõ từng loại CSS Selector, cách áp dụng hiệu quả và tránh những lỗi thường gặp mà nhiều người mới dễ mắc. Hãy cùng khám phá ngay, vì nắm vững CSS Selector chính là bước đầu tiên để làm chủ giao diện website chuyên nghiệp!
CSS selector là gì?
CSS Selector (bộ chọn CSS) là cú pháp dùng để xác định phần tử HTML mà bạn muốn áp dụng quy tắc CSS. Nói cách khác, Selector giúp trình duyệt “biết” bạn đang muốn thay đổi giao diện cho phần tử nào — ví dụ như đoạn văn, tiêu đề, nút bấm hay hình ảnh.
Trong vai trò của một Front-end Developer, bạn có thể hiểu CSS Selector như “bộ lọc” thông minh: nó tìm đúng phần tử theo tên thẻ (p, div), theo lớp (.class), theo ID (#id) hoặc theo mối quan hệ giữa các phần tử (như cha – con). Nhờ đó, bạn có thể định dạng, bố cục và tùy chỉnh giao diện một cách chính xác mà không cần chỉnh sửa trực tiếp mã HTML.
Vai trò và cách sử dụng của CSS selector
CSS Selector giữ vai trò trung tâm trong việc kết nối giữa HTML và CSS, giúp lập trình viên xác định chính xác phần tử cần được áp dụng kiểu dáng. Thay vì định dạng toàn bộ trang, Selector cho phép bạn chỉ định vùng ảnh hưởng cụ thể – từ một thẻ duy nhất đến nhóm phần tử có cùng thuộc tính.
Nhờ CSS Selector, bạn có thể:
- Tối ưu cấu trúc mã CSS, tránh lặp lại không cần thiết.
- Tăng khả năng tái sử dụng và dễ bảo trì khi phát triển dự án lớn.
- Kiểm soát chính xác giao diện: thay đổi màu sắc, kích thước, bố cục hay hiệu ứng của từng phần tử.
- Cải thiện hiệu suất render bằng cách chọn lựa phần tử hiệu quả, giúp trình duyệt xử lý nhanh hơn.
Cách sử dụng CSS selector như sau
selector {
property: value;
}
Ví dụ:
p {
color: #333;
font-size: 16px;
}Trong đoạn này, p là selector, xác định tất cả các thẻ <p> trong HTML và áp dụng thuộc tính màu chữ (color) và kích thước chữ (font-size).
Ngoài selector theo tên thẻ, bạn có thể sử dụng nhiều loại khác như:
- Class selector (.classname) → chọn phần tử có class cụ thể.
- ID selector (#idname) → chọn phần tử có ID duy nhất.
- Attribute selector ([attribute=value]) → chọn phần tử theo thuộc tính HTML.
- Combinator selector → chọn phần tử dựa trên mối quan hệ cha – con, anh – em.
Các loại CSS selector
CSS cung cấp nhiều loại selector (bộ chọn) khác nhau để giúp lập trình viên xác định chính xác phần tử HTML cần định dạng. Việc hiểu rõ từng loại selector không chỉ giúp mã CSS rõ ràng, dễ bảo trì, mà còn tăng hiệu suất xử lý của trình duyệt. Dưới đây là những nhóm CSS Selector phổ biến và cách sử dụng của chúng:
Basic Selectors – Bộ chọn cơ bản
Đây là nhóm selector phổ biến nhất, thường được sử dụng trong mọi dự án:
| Loại selector | Cú pháp | Mô tả | Ví dụ |
| Universal Selector | * | Áp dụng cho tất cả phần tử trong trang. | * { margin: 0; padding: 0; } |
| Type Selector | element | Chọn phần tử theo tên thẻ HTML. | h1 { font-size: 24px; } |
| Class Selector | .classname | Chọn tất cả phần tử có cùng class. | .btn { background: #007bff; } |
| ID Selector | #idname | Chọn phần tử duy nhất có ID tương ứng. | #header { height: 80px; } |
Attribute Selectors – Bộ chọn theo thuộc tính
Khi cần định dạng phần tử dựa vào thuộc tính HTML hoặc giá trị thuộc tính, bạn có thể dùng nhóm selector này.
input[type=”email”] { border-color: #ccc; }
a[target=”_blank”] { color: #1a73e8; }
Combinator Selectors – Bộ chọn kết hợp
Nhóm này dùng để xác định mối quan hệ giữa các phần tử, giúp bạn chọn chính xác phần tử trong cây DOM.
| Cú pháp | Tên | Ý nghĩa | Ví dụ |
| A B | Descendant | Chọn B nằm bên trong A (bất kỳ cấp nào). | div p { color: #555; } |
| A > B | Child | Chọn B là con trực tiếp của A. | ul > li { list-style: none; } |
| A + B | Adjacent Sibling | Chọn B ngay sau A. | h2 + p { margin-top: 10px; } |
| A ~ B | General Sibling | Chọn tất cả B cùng cấp sau A. | h2 ~ p { color: gray; } |
Pseudo-classes & Pseudo-elements – Bộ chọn giả
Selector giả giúp định dạng phần tử dựa vào trạng thái động hoặc một phần cụ thể của phần tử mà HTML không thể mô tả được.
Pseudo-class:
a:hover { color: red; }
input:focus { border-color: #1a73e8; }
li:first-child { font-weight: bold; }Pseudo-element:
p::first-line { text-transform: uppercase; }
p::before { content: "👉 "; color: #666; }Grouping Selectors – Bộ chọn nhóm
Khi nhiều phần tử có cùng định dạng, bạn có thể nhóm chúng lại để giảm dung lượng CSS:
h1, h2, h3 {
color: #222;
font-family: "Inter", sans-serif;
}Selector list là gì?
Selector list (danh sách bộ chọn) là tập hợp nhiều CSS selector được ngăn cách bằng dấu phẩy (,), cho phép bạn áp dụng cùng một quy tắc CSS cho nhiều phần tử khác nhau mà không cần viết lặp lại mã.
Nói cách khác, thay vì phải khai báo nhiều đoạn CSS cho từng selector riêng lẻ, bạn có thể gom nhóm chúng lại trong một dòng, giúp mã ngắn gọn, dễ bảo trì và tải nhanh hơn.
Ví dụ:
h1, h2, h3 {
color: #222;
font-family: "Inter", sans-serif;
}Ở ví dụ trên:
- h1, h2, h3 là ba selector khác nhau.
- Dấu phẩy (,) biến chúng thành một selector list.
- Cả ba phần tử tiêu đề sẽ chia sẻ cùng một quy tắc CSS (màu chữ và font chữ).
Cấu trúc CSS selector thường gặp
Trong CSS, mỗi selector đều có một cấu trúc riêng nhằm xác định chính xác phần tử HTML mà bạn muốn định dạng. Dưới đây là bốn nhóm cấu trúc thường gặp, được sử dụng phổ biến trong quá trình viết CSS:
Simple Selector
Là loại selector cơ bản nhất, dùng để chọn phần tử trực tiếp dựa trên tên thẻ (element), class, ID, hoặc thuộc tính.
Ví dụ:
p { color: blue; }
#header { background: gray; }
.button { padding: 10px; }Compound Selector
Đây là sự kết hợp của nhiều simple selector trên cùng một phần tử.
Ví dụ:
button.primary:hover { background: green; }
Trong ví dụ trên, phần tử button có class .primary và trạng thái :hover được kết hợp thành một selector duy nhất.
Ứng dụng: rất hữu ích khi bạn cần định dạng phần tử ở nhiều điều kiện khác nhau mà không cần lặp lại mã CSS.
Complex Selector
Gồm nhiều simple hoặc compound selector được kết nối bằng combinator như > (child), + (adjacent sibling), ~ (general sibling), hoặc dấu cách (descendant).
Ví dụ:
div > p { color: red; }
ul li a { text-decoration: none; }Ứng dụng: giúp kiểm soát style theo mối quan hệ giữa các phần tử, thường được dùng trong các bố cục giao diện có nhiều lớp lồng nhau.
Relative Selector
Đây là dạng selector phụ thuộc vào vị trí tương đối trong DOM, thường được sử dụng với pseudo-class như :has(), :is(), :where().
Ví dụ:
article:has(h2) { border: 1px solid #ccc; }
Ứng dụng: được dùng trong CSS hiện đại để giảm phụ thuộc vào JavaScript trong việc xác định quan hệ giữa các phần tử.
Hiểu rõ CSS Selector là gì và nắm vững các loại selector giúp bạn kiểm soát giao diện website một cách linh hoạt, chính xác và tối ưu hơn. Dù là dự án cá nhân hay hệ thống web doanh nghiệp, việc áp dụng đúng selector sẽ giúp mã CSS ngắn gọn, dễ bảo trì và cải thiện hiệu suất hiển thị.
