Pilih Anak dalam CSS

Pilih anak > membolehkan anda memilih elemen berdasarkan sarangan langsung antara satu sama lain.

Sintaks

pemilih1 > pemilih2 {
	
}

Contoh

Mari kita sasarkan semua tag b, yang terletak secara langsung di dalam tag p, dan warnakan mereka dengan warna merah:

<p>
	teks <b>+</b>
</p>
<p>
	teks <i><b>-</b></i>
</p>

p > b {
	color: red;
}

Contoh

Mari kita sasarkan semua tag b, yang terletak secara langsung di dalam elemen dengan kelas .block, dan warnakan mereka dalam warna merah:

<p class="block">
	teks <b>+</b>
</p>
<p class="block">
	teks <i><b>-</b></i>
</p>
<p>
	teks <b>-</b>
</p>

.block > b {
	color: red;
}

Contoh

Mari kita sasarkan semua elemen dengan kelas .elem, yang terletak secara langsung di dalam elemen dengan kelas .block, dan warnakan mereka dengan warna merah:

<p class="block">
	teks <span class="elem">+</span>
</p>
<p class="block">
	teks <i><span class="elem">-</span></i>
</p>
<p class="block">
	teks <span>-</span>
</p>
<p>
	teks <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

Lihat juga

Pilih Keturunan,
yang membolehkan anda memilih elemen berdasarkan ibu bapanya
Pilih Saudara Berdekatan,
yang membolehkan anda memilih elemen berdasarkan jirannya
Pilih Saudara Umum,
yang membolehkan anda memilih elemen selepas elemen yang ditentukan
Pilih Universal,
yang membolehkan anda memilih semua elemen