Bộ chọn trong CSS
Bộ chọn CSS dùng để chọn các phần tử HTML mà chúng ta muốn tạo kiểu.
Bộ chọn CSS
Bộ chọn CSS được sử dụng để "tìm" (hoặc chọn) các phần tử HTML mà chúng ta muốn tạo kiểu.
Chúng ta có thể chia các bộ chọn CSS ra thành năm loại.
- Simple selectors - Bộ chọn đơn giản: Chọn các phần tử dựa trên tên, id, lớp
- Combinator selectors - Bộ chọn kết hợp: Chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng
- Pseudo-class selectors - Bộ chọn lớp giả: Chọn phần tử dựa trên một trạng thái nhất định
- Pseudo-elements selectors - Bộ chọn phần tử giả: Chọn và tạo kiểu cho một phần của phần tử
- Attribute selectors - Bộ chọn thuộc tính: Chọn các phần tử dựa trên một thuộc tính hoặc giá trị thuộc tính
Trong bài này, chúng ta sẽ tìm hiểu các bộ chọn CSS cơ bản nhất.
Bộ chọn phần tử CSS
Bộ chọn phần tử chọn các phần tử HTML dựa trên tên của phần tử đó.
Ví dụ: Tất cả các phần tử <p> trên trang sẽ được căn giữa với màu văn bản là màu đỏ.
p { text-align: center; color: red; }
Bộ chọn lớp CSS
Bộ chọn lớp chọn các phần tử HTML với một thuộc tính class cụ thể.
Để chọn các phần tử với một lớp cụ thể, chúng ta viết một ký tự dấu chấm (.) ở trước, và theo sau là tên lớp.
Ví dụ: Tất cả các phần tử HTML có class="center" sẽ có màu đỏ và được căn giữa.
.center {
text-align: center;
color: red;
}
Chúng ta cũng có thể chỉ định chỉ có các phần tử HTML cụ thể mới bị ảnh hưởng bởi lớp CSS.
Ví dụ: Chỉ các phần tử <p> có class="center" mới có màu đỏ và được căn giữa.
p.center {
text-align: center;
color: red;
}
Các phần tử HTML cũng có thể có nhiều hơn một lớp.
Bộ chọn chung CSS
Bộ chọn phổ quát (*) sẽ chọn tất cả các phần tử HTML có trên trang.
Ví dụ: Quy tắc CSS bên dưới sẽ ảnh hưởng đến mọi phần tử HTML trên trang
* { text-align: center; color: blue; }
Bộ chọn nhóm CSS
Bộ chọn nhóm chọn tất cả các phần tử HTML có cùng định nghĩa kiểu.
Xem mã CSS sau: (các phần tử h1, h2 và p có cùng định nghĩa kiểu)
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }
Sẽ tốt hơn nếu chúng ta nhóm các bộ chọn, để giảm thiểu mã.
Để nhóm các bộ chọn, chúng ta phân tách từng bộ chọn bằng dấu phẩy.
Ví dụ: Chúng ta nhóm các bộ chọn từ đoạn mã trên
h1, h2, p { text-align: center; color: red; }