CSS ရှိ အမျိုးတော်စပ်သော selector

အမျိုးတော်စပ်သော selector ~ သည် တစ်ခုတည်းသော မိဘ element အတွင်း၌ သတ်မှတ်ထားသော element ၏ နောက်တွင် တည်ရှိသည့် element အားလုံးကို ရွေးချယ်ခွင့်ပြုသည်။

ဥပမာ

h2 tag များ၏ နောက်တွင် တည်ရှိသည့် p tag အားလုံးကို ရည်ညွှန်း၍ ၎င်းတို့ကို အနီရောင်သို့ ပြောင်းလဲကြပါစို့။

html<div>
  <h2>စာသား</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  -
</p>

cssh2 ~ p {
  color: red;
}

Результат:

ဥပမာ

.test class ရှိ element များ၏ နောက်တွင် တည်ရှိသည့် p tag အားလုံးကို ရည်ညွှန်း၍ ၎င်းတို့ကို အနီရောင်သို့ ပြောင်းလဲကြပါစို့။

html<div>
  <p class="test">
    စာသား
  </p>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<p>
  ---
</p>

css.test ~ p {
  color: red;
}

Результат:

ဥပမာ

.test class ရှိ element များ၏ နောက်တွင် တည်ရှိသည့် .elem class ရှိ element အားလုံးကို ရည်ညွှန်း၍ ၎င်းတို့ကို အနီရောင်သို့ ပြောင်းလဲကြပါစို့။

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>