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

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

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

selector1 ~ selector2 {
	
}

ဥပမာ

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

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

h2 ~ p {
	color: red;
}

ဥပမာ

.test ကလပ်စ်ရှိသော အစိတ်အပိုင်းများ၏ နောက်တွင် ရှိသော p တဂ်အားလုံးကို ရည်ညွှန်းပြီး ၎င်းတို့ကို အနီရောင်ဆေးခြယ်ကြပါစို့။

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

.test ~ p {
	color: red;
}

ဥပမာ

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

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

.test ~ .elem {
	color: red;
}

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

သားသမီးရွေးချယ်စက် (Child Selector),
အလွှာဆက်တိုက် ထည့်သွင်းမှု (direct nesting) အရ အစိတ်အပိုင်းများကို ရွေးချယ်ခွင့်ပြုသည်။
အကြောင်းအရာရွေးချယ်စက် (Descendant Selector),
၎င်း၏ မိဘအလိုက် အစိတ်အပိုင်းတစ်ခုကို ရွေးချယ်ခွင့်ပြုသည်။
အနီးကပ် ညီအစ်ကို/ညီအစ်မရွေးချယ်စက် (Adjacent Sibling Selector),
၎င်း၏ အနီးကပ်ဆုံး ညီအစ်ကို/ညီအစ်မအလိုက် အစိတ်အပိုင်းတစ်ခုကို ရွေးချယ်ခွင့်ပြုသည်။
အထွေထွေရွေးချယ်စက် (Universal Selector),
အစိတ်အပိုင်းအားလုံးကို ရွေးချယ်ခွင့်ပြုသည်။