Selektor Saudara dalam CSS

Selektor saudara ~ memungkinkan Anda memilih semua elemen yang berada setelah elemen yang ditentukan di dalam induk yang sama.

Sintaks

cssselektor1 ~ selektor2 {
  
}

Contoh

Mari kita merujuk ke semua tag p, yang berada setelah tag h2, dan warnai 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 merujuk ke semua tag p, yang berada setelah elemen dengan kelas .test, dan warnai 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 merujuk ke semua elemen dengan kelas .elem, yang berada setelah elemen dengan kelas .test, dan warnai 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;
}

Результат:

Lihat juga