Bộ chọn con trong CSS

Bộ chọn con > cho phép chọn các phần tử dựa trên mối quan hệ lồng nhau trực tiếp của chúng.

Cú pháp

bộ_chọn1 > bộ_chọn2 {
	
}

Ví dụ

Hãy áp dụng cho tất cả các thẻ b, nằm trực tiếp bên trong các thẻ p, và tô màu đỏ cho chúng:

<p>
	văn bản <b>+</b>
</p>
<p>
	văn bản <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Ví dụ

Hãy áp dụng cho tất cả các thẻ b, nằm trực tiếp bên trong các phần tử có lớp .block, và tô màu đỏ cho chúng:

<p class="block">
	văn bản <b>+</b>
</p>
<p class="block">
	văn bản <i><b>-</b></i>
</p>
<p>
	văn bản <b>-</b>
</p>

.block > b {
	color: red;
}

Ví dụ

Hãy áp dụng cho tất cả các phần tử có lớp .elem, nằm trực tiếp bên trong các phần tử có lớp .block, và tô màu đỏ cho chúng:

<p class="block">
	văn bản <span class="elem">+</span>
</p>
<p class="block">
	văn bản <i><span class="elem">-</span></i>
</p>
<p class="block">
	văn bản <span>-</span>
</p>
<p>
	văn bản <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Xem thêm

Bộ chọn hậu duệ,
cho phép chọn một phần tử dựa trên phần tử cha của nó
Bộ chọn anh chị em kề nhau,
cho phép chọn một phần tử dựa trên phần tử lân cận của nó
Bộ chọn anh chị em chung,
cho phép chọn các phần tử sau một phần tử đã cho
Bộ chọn toàn cục,
cho phép chọn tất cả các phần tử