HTML5-এ :last-child সিলেক্টর প্রত্যাশা অনুযায়ী কাজ করছে না? কারণ এবং সমাধান

:last-child কীভাবে কাজ করে

:last-child প্যারেন্ট এলিমেন্টের শেষ চাইল্ড এলিমেন্ট সিলেক্ট করে — ক্লাস বা ট্যাগ देखकर নয়। যদি শেষ চাইল্ড আপনার টার্গেট এলিমেন্ট না হয়, তবে এটি কাজ করবে না।

উদাহরণ: কাজ করবে

<div>
  <a class="target">এটি .target ক্লাসের শেষ এলিমেন্ট</a>
  <span>এটি শেষ চাইল্ড</span> <!-- :last-child এটিকে সিলেক্ট করবে -->
</div>

<style>
.target:last-child { background: blue; } /* কাজ করবে না! */
</style>

সমাধান: :last-of-type বা :last-child স্ট্রাকচার ফিক্স

• :last-of-type: নির্দিষ্ট ট্যাগের শেষ występuance সিলেক্ট করে (উপরের কেসে a:last-of-type কাজ করবে)।
• স্ট্রাকচার ফিক্স: টার্গেট এলিমেন্টকে প্যারেন্টের শেষ চাইল্ড করুন।
• JavaScript ফলব্যাক: document.querySelector('.target:last-of-type') বা [...document.querySelectorAll('.target')].pop()।

স Faces