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 đỏ:

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

cssh2 + 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 đỏ:

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

css.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 đỏ:

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

css.test + .elem {
  color: red;
}

Результат:

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

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

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