CSS හි සහෝදර තේරීම්කරු

සහෝදර තේරීම්කරු ~ එක් මාපියෙකු තුළ නිශ්චිත මූලද්‍රව්‍යයකට පසුව පිහිටා ඇති සියලුම මූලද්‍රව්‍ය තෝරා ගැනීමට ඉඩ සලසයි.

වාක්‍ය රචනය

cssතේරීම්කරු1 ~ තේරීම්කරු2 {
  
}

උදාහරණය

අපි h2 ටැග් වලට පසුව පිහිටා ඇති සියලුම p ටැග් වෙත යොමු වී ඒවා රතු පැහැයට අලෙවිසැල් කරමු:

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

cssh2 ~ p {
  color: red;
}

Результат:

උදාහරණය

අපි .test පන්තියේ මූලද්‍රව්‍ය වලට පසුව පිහිටා ඇති සියලුම p ටැග් වෙත යොමු වී ඒවා රතු පැහැයට අලෙවිසැල් කරමු:

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

css.test ~ p {
  color: red;
}

Результат:

උදාහරණය

අපි .test පන්තියේ මූලද්‍රව්‍ය වලට පසුව පිහිටා ඇති සියලුම .elem පන්තියේ මූලද්‍රව්‍ය වෙත යොමු වී ඒවා රතු පැහැයට අලෙවිසැල් කරමු:

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

Результат:

මෙයද බලන්න