Selektor Anak di CSS

Selektor anak > memungkinkan memilih elemen berdasarkan penempatan langsung satu sama lain.

Sintaks

selector1 > selector2 {
	
}

Contoh

Mari kita targetkan semua tag b, yang berada langsung di dalam tag p, dan warnai dengan warna merah:

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

p > b {
	color: red;
}

Contoh

Mari kita targetkan semua tag b, yang berada langsung di dalam elemen dengan kelas .block, dan warnai 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 targetkan semua elemen dengan kelas .elem, yang berada langsung di dalam elemen dengan kelas .block, dan warnai 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

Selektor Keturunan,
yang memungkinkan memilih elemen berdasarkan induknya
Selektor Saudara Berdekatan,
yang memungkinkan memilih elemen berdasarkan tetangganya
Selektor Saudara Umum,
yang memungkinkan memilih elemen setelah elemen yang ditentukan
Selektor Universal,
yang memungkinkan memilih semua elemen