The Child Selector

Trong chương trước, chúng ta đã xem selector con cháu hữu ích ra sao bưởi chúng cho phép ta chọn toàn bộ con và cháu (và thậm chí nhiều hơn nữa) của một hay nhiều thành phần. Tuy nhiên, thi thoảng nó có khi QUÁ mạnh - đôi khi bạn chỉ muốn chọn chỉ con của một thành phần mà thôi. Rất may cho chúng ta, CSS có selector cho phép ta thực hiện điều này!

Trong chương trước, chúng ta có một ví dụ với selector con cháu cho phép ta tự động chọn toàn bộ thẻ bold thông qua cây phân cấp:

<style type="text/css">
div.highlighted b {
	color: Blue;
}
</style>

<div class="highlighted">
	<b>Level 0...</b>
	<div>
		<b>Level 1...</b>
		<div>
			<b>Level 2...</b>
		</div>
	</div>
</div>

Cú pháp cho selector con trực tiếp như sau:

parent > child

Vậy, viết lại ví dụ trên để chọn con trực tiếp của thẻ div.highlighted rất dễ dàng:

<style type="text/css">
div.highlighted > b {
	color: Blue;
}
</style>

<div class="highlighted">
	<b>Level 0...</b>
	<div>
		<b>Level 1...</b>
		<div>
			<b>Level 2...</b>
		</div>
	</div>
	<b>Level 0 again...</b>
</div>

Chú ý kết quả thu được chỉ có con trực tiếp mới bị ảnh hưởng.

Tất nhiên, bạn có thể thêm nhiều yêu cầu vào hơn cả cho các con cháu và con. Ví dụ:

<style type="text/css">
div.highlighted > ul > li > a {
	color: DarkOrange;
}
</style>

<div class="highlighted">
	<ul>
		<li><a href="#">List Link 1</a></li>
		<li><a href="#">List Link 2</a></li>
		<ul>
			<li><a href="#">List Link 2.1</a></li>
		</ul>
		<li><a href="#">List Link 3</a></li>
	</ul>
</div>

Chú ý cách chúng ta làm cho selector cụ thể hơn so với phần trước - thay vì chỉ nhắm tới ví dụ div có class "highlighted" hay đường dẫn trong list, tôi tìm tới các đường dẫn là con trực tiếp của các thành phần trong dánh sách, các đường dẫn sẽ không bọ ảnh hưởng bởi quy tắc và nếu bạn thêm danh sách khác không ở trong div highlighted thì sẽ không ảnh hưởng gì

Summary

Selector con là phiên bản cụ thể hơn selector con cháu nhưng cũng không kém phần mạnh mẽ. Bạn có thể dùng một trong hai để đơn giản hóa mã CSS!