Selector (bộ chọn) là thành phần dùng để xác định phần tử HTML mà bạn muốn áp dụng kiểu dáng. CSS cung cấp nhiều loại selector để bạn linh hoạt trong việc thiết kế giao diện.
1. Selector cơ bản
| Loại Selector | Cú pháp | Mô tả |
|---|---|---|
| Tên thẻ | p | Chọn tất cả thẻ <p> |
| Class | .ten-class | Chọn phần tử có thuộc tính class="ten-class" |
| ID | #ten-id | Chọn phần tử có id="ten-id" |
🔹 Ví dụ:
p {
color: blue;
}
.title {
font-size: 24px;
}
#main {
background-color: yellow;
}
2. Selector tổ hợp
| Loại | Cú pháp | Mô tả |
|---|---|---|
| Group selector | h1, h2, p | Áp dụng cho nhiều phần tử cùng lúc |
| Descendant selector | div p | Chọn tất cả <p> nằm trong <div> |
| Child selector | ul > li | Chọn <li> là con trực tiếp của <ul> |
| Adjacent sibling | h1 + p | Chọn <p> ngay sau <h1> |
| General sibling | h1 ~ p | Chọn tất cả <p> sau <h1> cùng cấp cha |
🔹 Ví dụ:
div p {
color: gray;
}
ul > li {
list-style-type: square;
}
3. Pseudo-class
Pseudo-class là selector đặc biệt dùng để chọn phần tử ở trạng thái cụ thể.
| Pseudo-class | Mô tả |
|---|---|
:hover | Khi người dùng rê chuột lên phần tử |
:first-child | Phần tử đầu tiên trong nhóm con |
:last-child | Phần tử cuối cùng |
:nth-child(n) | Phần tử thứ n |
🔹 Ví dụ:
a:hover {
color: red;
}
li:first-child {
font-weight: bold;
}
4. Pseudo-element
Pseudo-element cho phép bạn định dạng một phần cụ thể của phần tử.
| Pseudo-element | Mô tả |
|---|---|
::before | Thêm nội dung trước phần tử |
::after | Thêm nội dung sau phần tử |
::first-letter | Định dạng chữ cái đầu tiên |
::first-line | Định dạng dòng đầu tiên |
🔹 Ví dụ:
p::first-letter {
font-size: 200%;
color: red;
}
p::after {
content: " 🔥";
}