The Descendant Selector

Cho tới giờ chúng ta chỉ dùng selector hướng trực tiếp tới element hay nhóm element với ID hay class cụ thể. Đạc biệt là element của một dạng đặc biệt nào đó như đường dẫn hay hình ảnh ... nhưng nếu bạn muốn tìm element trong một phần nào đó của trang thì sao? Tại đây các kết hợp được dùng, một loạt các selector dùng phân cấp element trong trang được sử dụng.

Trong chương này chúng ta sẽ cùng xem Descendant selector, cho phép chúng ta giới hạn các thành phần là con cháu của thành phần khác. Cú pháp rất đơn giản - bạn chỉ viết cha và sau đó là khoảng trắng cuối là các thành phần mà bạn muốn. Ví dụ như sau:

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

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Hello, <b>world</b> - what a <b>beautiful</b> day!

Trong ví dụ này, chúng ta muốn toàn bộ element có chữ đậm chuyển sang màu xanh nhưng chỉ khi chúng trong đoạn. Nếu bạn thử ví dụ này thì bạn sẽ thấy thẻ b dùng 4 lần, chỉ hai thẻ dùng trong đoạn thì mới chuyển sang màu xanh, như vậy selector con sẽ được dùng!

Đây là một ví dụ rất đơn giản nhưng hãy nghĩ về một bức tranh toàn cảnh - ví dụ, rất dễ dàng cho bạn thay đổi màu sắc của một đường dẫn bên trong main menu mà không cần phải liệt kê chúng theo class!

Of course, you can use all the usual modifiers to limit your selector to specific classes or ID's, like in this example:

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

<p class="highlighted">Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

<p>Hello, <b>world</b> - what a <b>beautiful</b> day!</p>

Ở đây chúng ta chỉ làm đậm các thành phần con cháu của đoạn văn bản với class có tên "highlighted".

A descendant doesn't need to be the direct child

Với loại selector này, bạn nên chú ý rằng không chỉ con trực tiếp được chọn - mà con của con (cháu) cũng sẽ được chọn, thông qua cây. Ví dụ sau sẽ minh họa:

<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>

Ở đây, chúng ta chọn toàn bộ thành phần là con của thẻ div có class là "highlighted". Nếu bạn thử ví dụ này thì bạn sẽ thấy rằng mặc dù chúng ta gói toàn bộ thẻ bold trong nhiều lớp của thẻ div thì chúng vẫn bị ảnh hưởng toàn bộ. Nếu bạn muốn chỉ con trực tiếp thay đổi thì bạn cần chọn selector con, trong những chương tiếp theo sẽ giải thích cách làm.

Summary

Cú pháp cho selector con rất đơn giản - chỉ viết selector cha, khoảng trống và sau đó là selector đích. Mặc dù dễ dùng nhưng rất hiệu quả. Hy vọng bạn có thể nắm được từ ví dụn nhưng nếu không thì hãy đọc và xem thêm những CSS selector nâng cao có thể làm gì cho ban.