Bộ chọn liền kề trong CSS

Bộ chọn liền kề + cho phép chọn phần tử dựa vào phần tử liền kề ngay phía trước nó.

Ví dụ

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

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

h2 + p {
	color: red;
}

Ví dụ

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

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

.test + p {
	color: red;
}

Ví dụ

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

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

.test + .elem {
	color: red;
}

Bài tập thực hành

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>

Hãy viết bộ chọn, chọn phần tử nằm ngay sau phần tử #elem.

Cho đoạn mã:

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

Hãy viết bộ chọn, chọn các phần tử nằm ngay sau các phần tử .elem.