Selektorët e Afërm në CSS

Selektori i afërm ~ ju lejon të zgjidhni të gjithë elementët që ndodhen pas një elementi të caktuar brenda një prindi të përbashkët.

Shembull

Le t'i drejtohemi të gjithë etiketave p, që ndodhen pas etiketave h2, dhe t'i ngjyrosim ato në të kuqe:

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

cssh2 ~ p {
  color: red;
}

Результат:

Shembull

Le t'i drejtohemi të gjithë etiketave p, që ndodhen pas elementeve me klasën .test, dhe t'i ngjyrosim ato në të kuqe:

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

css.test ~ p {
  color: red;
}

Результат:

Shembull

Le t'i drejtohemi të gjithë elementeve me klasën .elem, që ndodhen pas elementeve me klasën .test, dhe t'i ngjyrosim ato në të kuqe:

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

Результат:

Detyra Praktike

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>