Bộ chọn phần tử anh chị em trong CSS

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

Cú pháp

bộ_chọn1 ~ bộ_chọn2 {
	
}

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>text</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">
		text
	</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">
		text
	</p>
	<p class="elem">
		+
	</p>
	<p>
		-
	</p>
	<p class="elem">
		+
	</p>
</div>
<p>
	-
</p>

.test ~ .elem {
	color: red;
}

Bộ chọn phần tử con trực tiếp,
cho phép chọn các phần tử theo quan hệ lồng nhau trực tiếp
Bộ chọn theo ngữ cảnh,
cho phép chọn phần tử theo phần tử cha của nó
Bộ chọn phần tử anh chị em kề nhau,
cho phép chọn phần tử theo phần tử kề bên nó
Bộ chọn toàn thể,
cho phép chọn tất cả các phần tử