Bộ chọn con trong CSS

Giả sử chúng ta có đoạn mã sau:

<p>
	văn bản <b><i>in đậm và in nghiêng</i></b>
</p>
<p>
	văn bản <i>chỉ in nghiêng</i>
</p>

Giả sử chúng ta muốn chọn tất cả các thẻ i, là phần tử con cháu của các đoạn văn. Hãy làm điều đó:

p i {
	color: red;
}

Kết quả thực thi mã:

Bây giờ hãy chọn các thẻ i, là phần tử con trực tiếp của các đoạn văn của chúng ta. Bộ chọn con > sẽ giúp chúng ta việc này.

Để hiểu cách sử dụng nó, hãy so sánh nó với bộ chọn phần tử con cháu. Như thế này: p i - chúng ta sẽ chọn tất cả các phần tử in nghiêng bên trong các đoạn văn, còn như thế này: p > i - chỉ các phần tử in nghiêng là phần tử con trực tiếp của các đoạn văn.

Hãy áp dụng bộ chọn này vào mã HTML của chúng ta:

p > i {
	color: red;
}

Kết quả thực thi mã:

Cho đoạn mã sau:

<ul>
	<li>
		<i>in nghiêng</i>
		<b>in đậm</b>
		<b><i>in đậm và nghiêng</i></b>
	</li>
	<li>
		<i>in nghiêng</i>
		<b>in đậm</b>
		<b><i>in đậm và nghiêng</i></b>
	</li>
</ul>

Hãy tô màu đỏ chỉ những thẻ b, là phần tử con trực tiếp của các thẻ li.