Pemilih Adik Beradik dalam CSS

Pemilih adik beradik ~ membolehkan anda memilih semua elemen yang berada selepas elemen yang ditentukan dalam induk yang sama.

Sintaks

pemilih1 ~ pemilih2 {
	
}

Mari kita sasarkan semua tag p, yang berada selepas tag h2, dan warnakan mereka dengan warna merah:

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

h2 ~ p {
	color: red;
}

Mari kita sasarkan semua tag p, yang berada selepas elemen dengan kelas .test, dan warnakan mereka dengan warna merah:

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

.test ~ p {
	color: red;
}

Mari kita sasarkan semua elemen dengan kelas .elem, yang berada selepas elemen dengan kelas .test, dan warnakan 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;
}

Pemilih Anak,
yang membolehkan anda memilih elemen berdasarkan sarangan langsung
Pemilih Keturunan,
yang membolehkan anda memilih elemen berdasarkan induknya
Pemilih Adik Beradik Bersebelahan,
yang membolehkan anda memilih elemen berdasarkan jirannya
Pemilih Sejagat,
yang membolehkan anda memilih semua elemen