ซีเลกเตอร์พี่น้องใน CSS

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

ตัวอย่าง

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

<div>
	<h2>ข้อความ</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

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

<div>
	<p class="test">
		ข้อความ
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

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

<div>
	<p class="test">
		ข้อความ
	</p>
	<p class="elem">
		+++
	</p>
	<p>
		---
	</p>
	<p class="elem">
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ .elem {
	color: red;
}

กำหนดโค้ดดังนี้:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li id="elem">5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

เขียนซีเลกเตอร์ที่เลือกองค์ประกอบทั้งหมด ที่อยู่หลังองค์ประกอบ #elem ทันที