CSS ရှိ ကလေးဆက်လက်ရွေးချယ်မှု

ကလေးဆက်လက်ရွေးချယ်မှု > သည် တစ်ခုနှင့်တစ်ခု တိုက်ရိုက်အဆင့်ဆင့်ထည့်သွင်းထားသည့် အစိတ်အပိုင်းများကို ရွေးချယ်ခွင့်ပြုပါသည်။

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

selector1 > selector2 {
	
}

ဥပမာ

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

<p>
	text <b>+</b>
</p>
<p>
	text <i><b>-</b></i>
</p>

p > b {
	color: red;
}

ဥပမာ

.block class ရှိသော အစိတ်အပိုင်းများအတွင်း တိုက်ရိုက်ရှိနေသော အားလုံးသော b တဂ်များကို ရည်ညွှန်း၍ ၎င်းတို့ကို အနီရောင်ဆေးဆိုးကြပါစို့။

<p class="block">
	text <b>+</b>
</p>
<p class="block">
	text <i><b>-</b></i>
</p>
<p>
	text <b>-</b>
</p>

.block > b {
	color: red;
}

ဥပမာ

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

<p class="block">
	text <span class="elem">+</span>
</p>
<p class="block">
	text <i><span class="elem">-</span></i>
</p>
<p class="block">
	text <span>-</span>
</p>
<p>
	text <span class="elem">-</span>
</p>

.block > .elem {
	color: red;
}

ဒါကိုလည်း ကြည့်ပါ

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