5.1 Các loại bộ chọn
Bộ chọn kết hợp trong CSS cho phép lựa chọn các phần tử dựa trên vị trí tương hỗ của chúng trong cây DOM. Chúng cung cấp khả năng điều khiển style chính xác hơn, cho phép tùy chỉnh các phần tử phụ thuộc vào ngữ cảnh của chúng. Trong CSS có một số loại bộ chọn kết hợp như: bộ chọn con, bộ chọn phần tử con, bộ chọn phần tử liền kề và bộ chọn phần tử chung.
Các loại bộ chọn kết hợp:
- Bộ chọn con (Descendant Selector)
- Bộ chọn phần tử con (Child Selector)
- Bộ chọn phần tử liền kề (Adjacent Sibling Selector)
- Bộ chọn phần tử chung (General Sibling Selector)
5.2 Bộ chọn con
Bộ chọn con chọn tất cả các phần tử là con của phần tử được chỉ định. Con được coi là tất cả các phần tử nằm trong phần tử được chỉ định ở bất kỳ cấp độ lồng ghép nào (có thể là không chỉ con mà còn cháu và chắt).
Cú pháp:
cha con {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả <p>, mà nằm trong <div> */
div p {
color: blue;
}
<div>
<p>Đoạn văn này sẽ có màu xanh.</p>
<div>
<p>Đoạn văn này cũng sẽ có màu xanh, vì nó là con của "div".</p>
</div>
</div>
<p>Đoạn văn này sẽ không có màu xanh.</p>
5.3 Bộ chọn phần tử con
Bộ chọn phần tử con chỉ chọn những phần tử là phần tử con trực tiếp của phần tử cha được chỉ định.
Cú pháp:
cha > con {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn chỉ <p>, mà là phần tử con trực tiếp của .container */
.container > p {
color: green;
}
<div class="container">
<p>Đoạn văn này sẽ có màu xanh lá.</p>
<div class="wrapper">
<p>Đoạn văn này sẽ không có màu xanh lá, vì nó không phải phần tử con trực tiếp của .container.</p>
</div>
<p>Đoạn văn này sẽ có màu xanh lá.</p>
</div>
<p>Đoạn văn này sẽ không có màu xanh lá.</p>
5.4 Bộ chọn phần tử liền kề
Bộ chọn phần tử liền kề chọn phần tử ngay sau phần tử được chỉ định và nằm trên cùng một cấp độ lồng ghép.
Cú pháp:
trước + sau {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
/* Chọn <p>, mà ngay sau <h1> */
h1 + p {
color: red;
}
<h1>Tiêu đề 1</h1>
<p>Đoạn văn này sẽ có màu đỏ, vì nó ngay sau "h1".</p>
<p>Đoạn văn này sẽ không có màu đỏ.</p>
5.5 Bộ chọn phần tử chung
Bộ chọn phần tử chung chọn tất cả các phần tử nằm sau phần tử được chỉ định và nằm trên cùng một cấp độ lồng ghép.
Cú pháp:
trước ~ sau {
thuộc tính: giá trị;
thuộc tính: giá trị;
}
Ví dụ:
/* Chọn tất cả <p> mà nằm sau <h1> trên cùng một cấp độ lồng ghép */
h1 ~ p {
color: purple;
}
<h1>Tiêu đề 1</h1>
<p>Đoạn văn này sẽ có màu tím.</p>
<p>Đoạn văn này cũng sẽ có màu tím.</p>
<div>
<p>Đoạn văn này sẽ không có màu tím, vì nó nằm ở cấp độ lồng ghép khác.</p>
</div>
GO TO FULL VERSION