CSS-এ চাইল্ড সিলেক্টর
চাইল্ড সিলেক্টর > একে অপরের সরাসরি
নেস্টেড এলিমেন্ট নির্বাচন করতে দেয়।
সিনট্যাক্স
সিলেক্টর1 > সিলেক্টর2 {
}
উদাহরণ
আসুন আমরা সব b ট্যাগকে লক্ষ্য করি,
যেগুলো p ট্যাগের ভিতরে সরাসরি অবস্থিত,
এবং সেগুলোকে লাল রঙে রাঙাই:
<p>
text <b>+</b>
</p>
<p>
text <i><b>-</b></i>
</p>
p > b {
color: red;
}
:
উদাহরণ
আসুন আমরা সব b ট্যাগকে লক্ষ্য করি,
যেগুলো .block ক্লাসের এলিমেন্টের ভিতরে সরাসরি অবস্থিত,
এবং সেগুলোকে লাল রঙে রাঙাই:
<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;
}
:
উদাহরণ
আসুন আমরা সব .elem ক্লাসের এলিমেন্টকে লক্ষ্য করি,
যেগুলো .block ক্লাসের এলিমেন্টের ভিতরে সরাসরি অবস্থিত,
এবং সেগুলোকে লাল রঙে রাঙাই:
<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;
}
:
আরও দেখুন
-
বংশাণুক্রমিক সিলেক্টর,
যা এর প্যারেন্ট দ্বারা একটি এলিমেন্ট নির্বাচন করতে দেয় -
সংলগ্ন সibling সিলেক্টর,
যা এর সibling দ্বারা একটি এলিমেন্ট নির্বাচন করতে দেয় -
সাধারণ সibling সিলেক্টর,
যা একটি নির্দিষ্ট এলিমেন্টের পরের এলিমেন্ট নির্বাচন করতে দেয় -
ইউনিভার্সাল সিলেক্টর,
যা সব এলিমেন্ট নির্বাচন করতে দেয়
