CSS ရှိ ညီအစ်ကို/ညီအစ်မရွေးချယ်စက် (Sibling Selector)

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

ဝါကျဖွဲ့စည်းပုံ (Syntax)

cssselector1 ~ selector2 {
  
}

ဥပမာ

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

Результат:

ဆက်လက်လေ့လာရန်