CSS-এ চাইল্ড সিলেক্টর

ধরা যাক আমাদের নিম্নলিখিত কোড আছে:

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

ধরা যাক আমরা i ট্যাগগুলো নির্বাচন করতে চাই, যেগুলো প্যারাগ্রাফের বংশধর। এটা করা যাক:

cssp i {
  color: red;
}

কোড 실행ের ফলাফল:

এখন আসুন সেই i ট্যাগগুলো নির্বাচন করি, যেগুলো আমাদের প্যারাগ্রাফের সরাসরি বংশধর। এক্ষেত্রে চাইল্ড সিলেক্টর > আমাদের সাহায্য করবে।

এটি কীভাবে ব্যবহার করতে হয় তা বুঝতে, আসুন এটির সাথে ডিসেন্ডেন্ট সিলেক্টরের তুলনা করি। এভাবে: p i - আমরা প্যারাগ্রাফের ভিতরের সব ইটালিক নির্বাচন করব, আর এভাবে: p > i - শুধুমাত্র সেই ইটালিকগুলো, যেগুলো প্যারাগ্রাফের সরাসরি বংশধর।

আসুন এই সিলেক্টরটি আমাদের HTML কোডে প্রয়োগ করি:

cssp > i {
  color: red;
}

কোড 실행ের ফলাফল:

html<ul>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
  <li>
    <i>italic</i>
    <b>bold</b>
    <b><i>bold italic</i></b>
  </li>
</ul>