Selektor Saudara dalam CSS

Selektor saudara ~ memungkinkan Anda memilih semua elemen yang berada setelah elemen yang ditentukan di dalam induk yang sama.

Sintaks

selektor1 ~ selektor2 {
	
}

Mari kita merujuk ke semua tag p, yang berada setelah tag h2, dan warnai mereka dengan warna merah:

<div>
	<h2>teks</h2>
	<p>
		+
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Mari kita merujuk ke semua tag p, yang berada setelah elemen dengan kelas .test, dan warnai mereka dengan warna merah:

<div>
	<p class="test">
		teks
	</p>
	<p>
		+
	</p>
	<p>
		+
	</p>
</div>
<p>
	-
</p>

.test ~ p {
	color: red;
}

Mari kita merujuk ke semua elemen dengan kelas .elem, yang berada setelah elemen dengan kelas .test, dan warnai mereka dengan warna merah:

<div>
	<p class="test">
		teks
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Selektor Anak,
yang memungkinkan Anda memilih elemen berdasarkan penurunan langsung
Selektor Kontekstual,
yang memungkinkan Anda memilih elemen berdasarkan induknya
Selektor Tetangga,
yang memungkinkan Anda memilih elemen berdasarkan tetangganya
Selektor Universal,
yang memungkinkan Anda memilih semua elemen