Trong CSS, bộ chọn element > element dùng để chọn các phần tử con trực tiếp. Bộ chọn này đảm bảo style chỉ áp dụng cho các phần tử lồng trực tiếp. Nó bỏ qua mọi phần tử lồng sâu hơn.
- Direct child selection: Chỉ nhắm mục tiêu đến các phần tử con liền kề.
- Excludes deeper descendants:Không chọn các phần tử lồng sâu hơn một cấp.
- A more specific selection: Giúp thu hẹp phạm vi quy tắc CSS, tránh thay đổi style không mong muốn.
<!--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, not directly.</p>
</div>
</div>
</body>
</html>
<!--Driver Code Ends-->
In this example
- Bộ chọn > p chỉ nhắm mục tiêu đến phần tử
<p>con trực tiếp của.container div. - Phần tử
<p>thứ hai bên trong<div>lồng nhau sẽ không bị ảnh hưởng. Vì nó không phải là con trực tiếp của.container.
Common Use Cases
. Styling List Items in a Navigation Menu
Chỉ nhắm mục tiêu các mục danh sách cấp cao nhất trong navigation menu.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends--gt;
<style>
nav>ul>li {
display: inline-block;
margin-right: 20px;
color: blue;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</body>
</html>
<!--Driver Code Ends-->
. Spacing Between Form Inputs
Thêm margin giữa các trường nhập biểu mẫu, nhưng không nằm trong nested forms.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
form>input {
margin: 30px;
outline: 3px solid green;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<form>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<div><input type="text" placeholder="Nested input"></div>
</form>
</body>
</html>
<!--Driver Code Ends-->
. Styling Direct Child Div Elements
Áp dụng style cho các phần tử <div> trực tiếp bên trong một parent container.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.parent>div {
background-color: lightgray;
padding: 10px;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="parent">
<div>First child div</div>
<div>Second child div</div>
<span>A span element, not a div</span>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Styling Direct Child Buttons in a Toolbar
Áp dụng style cho các nút là con trực tiếp của một thanh công cụ.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
.toolbar>button {
background-color: blue;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<div class="toolbar">
<button>Button 1</button>
<button>Button 2</button>
<div><button>Nested Button</button></div>
</div>
</body>
</html>
<!--Driver Code Ends-->
. Targeting Direct Child Headings in Sections
Chỉ style các tiêu đề trực tiếp bên trong một section.
HTML<!--Driver Code Starts-->
<html>
<head>
<!--Driver Code Ends-->
<style>
section>h2 {
font-size: 24px;
color: green;
}
section{
border: 5px solid red;
}
</style>
<!--Driver Code Starts-->
</head>
<body>
<section>
<h2>Section 1 Heading</h2>
<div>
<h2>Nested Section Heading</h2>
</div>
</section>
</body>
</html>
<!--Driver Code Ends-->
Bộ chọn con trực tiếp (>) được hỗ trợ rộng rãi trên các trình duyệt hiện đại. Dưới đây là tổng quan về khả năng tương thích của nó:
Why Use the Element > Element Selector?
- Efficiency: Nó cho phép bạn áp dụng style có chọn lọc cho các phần tử liên quan nhất. Không ảnh hưởng đến các phần tử con lồng quá sâu.
- Avoid Overriding Styles: Khi xử lý các cấu trúc phức tạp, nó giúp đảm bảo chỉ các phần tử cụ thể nhận được style cần thiết.
- Improved Readability:Giúp duy trì CSS rõ ràng, ngắn gọn, đặc biệt khi xử lý các phần tử lồng nhau.