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

আগের সব পাঠে, সব সিলেক্টরকে সরাসরি এলিমেন্টটিকেই ধরতে হতো। এমন হতে পারে, যে একটি সিলেক্টর একটি এলিমেন্ট ধরে, এবং অন্যটি সিলেক্টর সেই এলিমেন্টের প্যারেন্টকে ধরে।

আপনি ইতিমধ্যেই জানেন যে, যদি প্যারেন্টকে, উদাহরণস্বরূপ, রং নির্ধারণ করা হয়, তবে সেই রং বংশধর দ্বারা উত্তরাধিকার সূত্রে প্রাপ্ত হবে। কিন্তু, যদি বংশধরকেও রং নির্ধারণ করা হয়, তবে বংশধরের সিলেক্টর প্যারেন্টের সিলেক্টরের চেয়ে বেশি অগ্রাধিকার পাবে।

এর মানে হলো, বংশধরের ট্যাগ সিলেক্টর প্যারেন্টের ক্লাসকে হারায়:

html<div class="block">
  <p>text</p>
</div>

css.block {
  color: red;
}
p {
  color: green; /* এই রং প্রয়োগ করা হবে */
}

Результат:

বংশধরের ট্যাগ সিলেক্টর প্যারেন্টের আইডেন্টিফায়ারকেও হারায়:

html<div id="block">
  <p class="text">text</p>
</div>

css#block {
  color: red;
}
.text {
  color: green; /* এই রং প্রয়োগ করা হবে */
}

Результат: