জেকুয়েরি :last সিলেক্টর
সংজ্ঞা এবং ব্যবহার
:last সিলেক্টরের মাধ্যমে কোন একটি নির্দিষ্ট এলিমেন্টের শেষটিকে সিলেক্ট করা হয়।
একটি গ্রুপের শেষ এলিমেন্টটিকে সিলেক্ট করার জন্য এই সিলেক্টরটি বেশিরভাগ সময়ই অন্য আরেকটি সিলেক্টরের সাথে ব্যবহার করা হয়। (নিচের উদাহরণ লক্ষ্য করুন)
সিনট্যাক্স
$(":last")
:last সিলেক্টর সংক্রান্ত উদাহরণ
শেষ <ul> এলিমেন্ট সিলেক্ট
নিচের উদাহরণে দেখানো হলো কিভাবে একটি ডকুমেন্টের শেষ <ul> এলিমেন্টটিকে সিলেক্ট করা যায়ঃ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :last সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("ul:last").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<h3>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম!!</h3>
<p>আমাদের ওয়েবসাইটে আমরা বাংলায় প্রোগ্রামীং শিক্ষার ব্যবস্থা করেছি।</p>
<p>আমাদের ওয়েবসাইটটি ফলো করে আপনি খুব সহজে প্রোগ্রামীং শিখতে পারবেন।</p>
<p>আমাদের ওয়েবসাইট থেকে আপনি যেই যেই বিষয়গুলো শিখতে পারবেনঃ</p>
<ul>
<li>এইচটিএমএল</li>
<li>সিএসএস</li>
<li>জাভাস্ক্রিপ্ট</li>
<li>পিএইচপি</li>
<li>এসকিউএল</li>
</ul>
<ul>
<li>জেকুয়েরি</li>
<li>বুটস্ট্রাপ</li>
<li>এঙ্গুলার জেএস</li>
<li>ওয়ার্ডপ্রেস</li>
</ul>
<ul>
<li>সি প্রোগ্রামীং</li>
<li>পাইথন প্রোগ্রামীং</li>
</ul>
</body>
</html>
ফলাফল
:last এবং :last-child সিলেক্টরের মধ্যে পার্থক্য
নিচের উদাহরণে :last এবং :last-child সিলেক্টরের মধ্যে পার্থক্য দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :last & .last-child সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btnOne").click(function(){
$("li:last").css({
"background-color": "green",
"color": "white",
});
});
$("#btnTwo").click(function(){
$("li:last-child").css({
"background-color": "yellow",
"color": "red",
});
});
});
</script>
</head>
<body>
<button id="btnOne">:last selector</button>
<button id="btnTwo">:last-child selector</button>
<h3>আমাদের ওয়েবসাইটে আপনাকে স্বাগতম!!</h3>
<p>আমাদের ওয়েবসাইটে আমরা বাংলায় প্রোগ্রামীং শিক্ষার ব্যবস্থা করেছি।</p>
<p>আমাদের ওয়েবসাইটটি ফলো করে আপনি খুব সহজে প্রোগ্রামীং শিখতে পারবেন।</p>
<p>আমাদের ওয়েবসাইট থেকে আপনি যেই যেই বিষয়গুলো শিখতে পারবেনঃ</p>
<ul>
<li>এইচটিএমএল</li>
<li>সিএসএস</li>
<li>জাভাস্ক্রিপ্ট</li>
<li>পিএইচপি</li>
<li>এসকিউএল</li>
</ul>
<ul>
<li>জেকুয়েরি</li>
<li>বুটস্ট্রাপ</li>
<li>এঙ্গুলার জেএস</li>
<li>ওয়ার্ডপ্রেস</li>
</ul>
<ul>
<li>সি প্রোগ্রামীং</li>
<li>পাইথন প্রোগ্রামীং</li>
</ul>
</body>
</html>
ফলাফল