Pemilih Adik Beradik dalam CSS

Pemilih adik beradik ~ membolehkan anda memilih semua elemen yang berada selepas elemen yang ditentukan dalam induk yang sama.

Contoh

Mari kita target semua tag p, yang berada selepas tag h2, dan warnakan mereka dengan warna merah:

html<div>
  <h2>teks</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

Contoh

Mari kita target semua tag p, yang berada selepas elemen dengan kelas .test, dan warnakan mereka dengan warna merah:

html<div>
  <p class="test">
    teks
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  ---
</p>

css.test ~ p {
  color: red;
}

Результат:

Contoh

Mari kita target semua elemen dengan kelas .elem, yang berada selepas elemen dengan kelas .test, dan warnakan mereka dengan warna merah:

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

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

Результат:

Tugas Amali

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>