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

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

cssh2 ~ p {
  color: red;
}

Результат:

Ví dụ

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

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

css.test ~ p {
  color: red;
}

Результат:

Ví dụ

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

html<div>
  <p class="test">
    văn bản
  </p>
  <p class="elem">
    +++
  </p>
  <p>
    ---
  </p>
  <p class="elem">
    +++
  </p>
</div>
<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>