Selektor Kontekstual di CSS

Selektor kontekstual, yang direpresentasikan oleh spasi (' '), memungkinkan untuk memilih tag yang bersarang di dalam induk yang ditentukan

Sintaks

selektor1 selektor2 {
	
}

Mari kita merujuk ke semua tag p di dalam tag div dan warnai dengan warna merah:

<div>
	<p>
		teks
	</p>
	<p>
		teks
	</p>
</div>

div p {
	color: red;
}

Mari kita merujuk ke semua tag p di dalam elemen dengan #elem dan warnai mereka dengan warna merah:

<div id="elem">
	<p>
		teks
	</p>
	<p>
		teks
	</p>
</div>

#elem p {
	color: red;
}

Mari kita merujuk ke semua tag p di dalam elemen dengan kelas .block dan warnai mereka dengan warna merah:

<div class="block">
	<p>
		teks
	</p>
	<p>
		teks
	</p>
</div>

.block p {
	color: red;
}

Mari kita merujuk ke semua tag b di dalam tag p, yang berada di dalam tag div dan warnai mereka dengan warna merah:

<div>
	<p>
		teks <b>+</b>
	</p>
</div>

div p b {
	color: red;
}

Selektor Anak,
yang memungkinkan untuk memilih elemen berdasarkan nested langsung
Selektor Saudara Berdekatan,
yang memungkinkan untuk memilih elemen berdasarkan tetangganya
Selektor Saudara Umum,
yang memungkinkan untuk memilih elemen setelah yang ditentukan
Selektor Universal,
yang memungkinkan untuk memilih semua elemen