ตัวเลือกเซเล็คเตอร์ใน CSS

ตัวเลือกเซเล็คเตอร์ ~ อนุญาตให้เลือก องค์ประกอบทั้งหมดที่อยู่หลังจากองค์ประกอบที่กำหนดไว้ ภายในผู้ปกครองเดียวกัน

ไวยากรณ์

selector1 ~ selector2 {
	
}

มาดูองค์ประกอบทั้งหมดที่มีแท็ก p ที่อยู่หลังจากแท็ก h2 และกำหนดสี ให้เป็นสีแดง:

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

h2 ~ p {
	color: red;
}

มาดูองค์ประกอบทั้งหมดที่มีแท็ก p ที่อยู่หลังจากองค์ประกอบที่มีคลาส .test และกำหนดสีให้เป็นสีแดง:

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

.test ~ p {
	color: red;
}

มาดูองค์ประกอบทั้งหมดที่มีคลาส .elem ที่อยู่หลังจากองค์ประกอบ ที่มีคลาส .test และกำหนดสีให้เป็นสีแดง:

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

.test ~ .elem {
	color: red;
}

ตัวเลือกเซเล็คเตอร์ลูก,
ซึ่งอนุญาตให้เลือกองค์ประกอบตามการซ้อนโดยตรง
ตัวเลือกเซเล็คเตอร์ตามบริบท,
ซึ่งอนุญาตให้เลือกองค์ประกอบตามผู้ปกครองของมัน
ตัวเลือกเซเล็คเตอร์ข้างเคียง,
ซึ่งอนุญาตให้เลือกองค์ประกอบตามองค์ประกอบข้างเคียงของมัน
ตัวเลือกเซเล็คเตอร์สากล,
ซึ่งอนุญาตให้เลือกองค์ประกอบทั้งหมด