Селектори хешоварӣ дар CSS

Селектори хешоварӣ ~ барои интихоби тамоми элементҳое, ки баъд аз элементҳои додашуда дар дохили як волидайн қарор доранд, истифода мешавад.

Намуна

Биёед ба тамоми тегҳои p, ки баъд аз тегҳои h2 қарор доранд, муроҷиат кунем ва онҳоро ба рангҳои сурх ранг кунем:

html<div>
  <h2>матн</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

Намуна

Биёед ба тамоми тегҳои p, ки баъд аз элементҳои бо синфи .test қарор доранд, муроҷиат кунем ва онҳоро ба рангҳои сурх ранг кунем:

html<div>
  <p class="test">
    матн
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  ---
</p>

css.test ~ p {
  color: red;
}

Результат:

Намуна

Биёед ба тамоми элементҳои бо синфи .elem, ки баъд аз элементҳои бо синфи .test қарор доранд, муроҷиат кунем ва онҳоро ба рангҳои сурх ранг кунем:

html<div>
  <p class="test">
    матн
  </p>
  <p class="elem">
    +++
  </p>
  <p>
    ---
  </p>
  <p class="elem">
    +++
  </p>
</div>
<p>
  ---
</p>

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

Результат:

Масъалаҳои амалӣ

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>