CSS-এ বংশধর সিলেক্টর

ধরুন আমাদের একটি ul তালিকা এবং একটি ol তালিকা আছে:

html<ul>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ul>
<ol>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
  <li>text</li>
</ol>

আসুন এই তালিকাগুলির li ট্যাগগুলিকে লাল রঙে রাঙাই:

cssli {
  color: red;
}

এখন ধরুন আমরা ul তালিকার li ট্যাগগুলি লাল রঙে রাঙাতে চাই, এবং ol তালিকার li ট্যাগগুলি - সবুজ রঙে।

এই ক্ষেত্রে বংশধর সিলেক্টর আমাদের সাহায্য করবে। এটি তাদের প্যারেন্ট অনুসারে ট্যাগ নির্বাচন করতে দেয়। এর জন্য প্যারেন্টের সিলেক্টর নির্দিষ্ট করতে হবে, এবং একটি স্পেস দিয়ে - বংশধরের সিলেক্টর। আমাদের ক্ষেত্রে ul li সিলেক্টরটি ul তালিকা থেকে সমস্ত li ট্যাগ নির্বাচন করবে, এবং ol li সিলেক্টরটি - ol তালিকা থেকে সমস্ত li ট্যাগ নির্বাচন করবে। আসুন সেগুলিকে প্রয়োজনীয় রঙে রাঙাই:

cssul li {
  color: red;
}
ol li {
  color: green;
}

বংশধর সিলেক্টর অগত্যা ট্যাগ সিলেক্টর নিয়ে গঠিত হতে হবে না - সেখানে যেকোনো সংখ্যক থাকতে পারে, একটি স্পেস দিয়ে লেখা। নিম্নলিখিত কোডে, উদাহরণস্বরূপ, সমস্ত i ট্যাগ নির্বাচন করা হয়, যা li ট্যাগের ভিতরে অবস্থিত, যারা আবার ul ট্যাগের ভিতরে অবস্থিত:

cssul li i {
  color: red;
}

html<ul>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
  <li>text <i>italic</i></li>
</ul>

<p>
  paragraph text <i>italic</i>
</p>
<p>
  paragraph text <i>italic</i>
</p>

html<p>
  paragraph text <b><i>bold italic</i></b>
</p>
<p>
  paragraph text <i>italic</i>
</p>