Сроден селектор во CSS

Сродниот селектор ~ овозможува да се изберат сите елементи кои се наоѓаат по дадениот елемент во рамки на ист родител.

Пример

Ајде да му пристапиме на сите тагови p, кои се наоѓаат по таговите h2, и да ги обоїме во црвена боја:

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

cssh2 ~ p {
  color: red;
}

Результат:

Пример

Ајде да му пристапиме на сите тагови p, кои се наоѓаат по елементите со класа .test, и да ги обоїме во црвена боја:

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

css.test ~ p {
  color: red;
}

Результат:

Пример

Ајде да му пристапиме на сите елементи со класа .elem, кои се наоѓаат по елементите со класа .test, и да ги обоїме во црвена боја:

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;
}

Результат:

Практични задачи

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>