Bộ chọn Anh em trong CSS

Bộ chọn anh em ~ cho phép chọn tất cả các phần tử nằm sau phần tử đã cho bên trong cùng một phần tử cha.

Ví dụ

Hãy áp dụng cho tất cả các thẻ p, nằm sau các thẻ h2, và tô màu chúng thành màu đỏ:

<div>
	<h2>văn bản</h2>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	-
</p>

h2 ~ p {
	color: red;
}

Hãy áp dụng cho tất cả các thẻ p, nằm sau các phần tử có lớp .test, và tô màu chúng thành màu đỏ:

<div>
	<p class="test">
		văn bản
	</p>
	<p>
		+++
	</p>
	<p>
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ p {
	color: red;
}

Hãy áp dụng cho tất cả các phần tử có lớp .elem, nằm sau các phần tử có lớp .test, và tô màu chúng thành màu đỏ:

<div>
	<p class="test">
		văn bản
	</p>
	<p class="elem">
		+++
	</p>
	<p>
		---
	</p>
	<p class="elem">
		+++
	</p>
</div>
<p>
	---
</p>

.test ~ .elem {
	color: red;
}

Cho đoạn mã:

<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>

Viết bộ chọn để chọn tất cả các phần tử, nằm ngay sau phần tử #elem.