Bộ chọn phần tử (element selector) (không có ký hiệu >) chọn tất cả phần tử con cháu của phần tử cha. Nó áp dụng style không chỉ cho các phần tử con trực tiếp. Mà còn cho mọi phần tử lồng nhau sâu hơn, làm cho nó tổng quát hơn bộ chọn con trực tiếp.
- Lựa chọn phần tử con cháu: Nhắm mục tiêu tất cả các phần tử lồng nhau, không chỉ con trực tiếp.
- Phạm vi bao phủ toàn diện: Ảnh hưởng đến mọi cấp độ lồng nhau bên trong phần tử cha được chọn.
- Phạm vi lựa chọn rộng hơn: Hữu ích để tạo kiểu cho toàn bộ phần hoặc phần tử bất kể độ sâu.
<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.container p {
color: red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="container">
<p>Directly inside the container.</p>
<div>
<p>Inside a nested div.</p>
<span>Span is also inside the nested div.</span>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
Trong ví dụ này:
- Bộ chọn container p nhắm mục tiêu tất cả các phần tử <p> là con cháu của .container div. Bất kể chúng là con trực tiếp hay lồng nhau sâu.
- Cả hai phần tử <p> (bên trong và bên ngoài <div> lồng nhau) sẽ được tạo kiểu màu xanh lam.
Các trường hợp sử dụng descendant selector
. Thay đổi kiểu mục danh sách trong một danh sách cụ thể
Bằng cách sử dụng descendant selector, bạn chỉ có thể tạo kiểu cho các mục danh sách trong một danh sách cụ thể. Bằng cách nhắm mục tiêu ul#main-list li, phương pháp này giúp phân biệt các styles cho các danh sách khác nhau trên trang.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
ul#main-list li {
font-weight: bold;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<ul id="main-list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu cho các đoạn văn bên trong một div cụ thể
Tạo kiểu cho các đoạn văn bên trong một <div> cụ thể cho phép bạn nhắm mục tiêu và áp dụng các quy tắc CSS. Chỉ cho các đoạn văn trong div đó. Bằng cách sử dụng một class hoặc ID selector trên div. Bạn có thể kiểm soát giao diện của các đoạn văn chứa bên trong nó mà không ảnh hưởng đến các đoạn khác trên trang.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
div.special p {
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="special">
<p>This paragraph inside the 'special' div.</p>
<h4>This is also inside</h4>
</div>
<div>
<p>This paragraph is outside the 'special' div.</p>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Tạo kiểu cho các đầu vào biểu mẫu trong một biểu mẫu cụ thể
Bạn có thể áp dụng các styles cụ thể cho đầu vào biểu mẫu bên trong một biểu mẫu cụ thể bằng descendant selector. Ví dụ form#contact-form input sẽ nhắm mục tiêu các đầu vào bên trong biểu mẫu có ID contact-form.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
form#contact-form input {
padding: 10px;
background-color: lightgray;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<form id="contact-form">
<input type="text" placeholder="Your Name">
</form>
<form>
<input type="text" placeholder="Another Form Name">
</form>
</body>
</html>
<!--Driver Code Ends-->
Tại sao nên sử dụng Element Element Selector?
- Ứng dụng rộng rãi: Lý tưởng khi bạn muốn áp dụng styles cho tất cả các phần tử con cháu bên trong một container. Bất kể độ sâu của chúng.
- Đơn giản: Bộ chọn này rất đơn giản để sử dụng và không yêu cầu bạn chỉ định rõ ràng con trực tiếp. Hoặc các cấp độ lồng nhau.
- Ít cụ thể hơn: Hoạt động tốt khi bạn không cần kiểm soát chính xác các phần tử con cụ thể. Nhưng muốn tạo kiểu cho một loạt các phần tử con cháu.
Ưu và nhược điểm của việc sử dụng Element Element Selector
| Ưu điểm | Nhược điểm |
|---|---|
| Áp dụng styles cho tất cả các phần tử con cháu. Hoàn hảo cho nhu cầu tạo kiểu rộng. | Có thể dẫn đến việccác styles không mong muốn được áp dụng cho các phần tử lồng nhau sâu hơn dự kiến. |
| Giảm nhu cầu viết thêm các class hoặc ID cho lồng nhau sâu. | Có thể gây ravấn đề về hiệu suất trong các tài liệu rất lớn với cấu trúc lồng nhau sâu. |
| Đơn giản để sử dụng và rất linh hoạt. | Có thể ghi đè các styles dành cho các phần tử cụ thể, đặc biệt trong bố cục phức tạp. |