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

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

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

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

Результат:

Xem thêm