জেকুয়েরি :nth-last-child() সিলেক্টর
সংজ্ঞা এবং ব্যবহার
:nth-last-child(n) সিলেক্টরের মাধ্যমে প্যারেন্ট এলিমেন্টের নিচ দিকে থেকে গুনে একই টাইপের নির্বিশেষে সকল nতম চাইল্ডকে সিলেক্ট করা হয়।
সিনট্যাক্স
$(":nth-last-child(n|even|odd|formula)")
প্যারামিটার ও তাদের ভ্যালু
নিচের টেবিলে :nth-last-child()সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ
| প্যারামিটার | বিবরণ |
|---|---|
| n | যেই এলিমেন্টকে সিলেক্ট করা হবে তার ইনডেক্স নাম্বার হবে। অবশ্যই সংখ্যা হতে হবে। প্রথম এলিমেন্টের ইনডেক্সের নাম্বার হবে 1 । |
| even | প্রত্যেক জোড় চাইল্ড এলিমেন্টকে সিলেক্ট করবে। |
| odd | প্রত্যেক বিজোড় চাইল্ড এলিমেন্টকে সিলেক্ট করবে। |
| formula | (an + b) ফর্মূলার মাধ্যমে কোন চাইল্ড এলিমেন্টকে সিলেক্ট করা হবে তা নির্দিষ্ট করে।
উদাহরণ: p:nth-last-child(3n+2) এর মাধ্যমে শেষের দিক থেকে দ্বিতীয় এলিমেন্ট থেকে শুরু করে প্রত্যেক তৃতীয় প্যারগ্রাফকে সিলেক্ট করে। |
:nth-last-child() সিলেক্টর সংক্রান্ত উদাহরণ
নিচের দিক থেকে গুনে প্যারেন্ট এলিমেন্টের প্রত্যেক তৃতীয় <p> এলিমেন্টকে সিলেক্ট
কিভাবে নিচের দিক থেকে গুনে প্যারেন্ট এলিমেন্টের প্রত্যেক তৃতীয় <p> এলিমেন্টকে সিলেক্ট করা যায়, তা দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :nth-last-child() সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-last-child(3)").css("background-color", "green");
});
</script>
</head>
<body>
<h3>এটি body এলিমেন্টের একটি হেডিং।</h3>
<p>এটি body এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি body এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>
<div style="border:1px solid green;">
<span>এটি প্রথম div এলিমেন্টের একটি span এলিমেন্ট।</span>
<p>এটি প্রথম div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি প্রথম div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ (এবং div এর তৃতীয় চাইল্ড এলিমেন্ট)।</p>
<p>এটি প্রথম div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div>
<br>
<div style="border:1px solid green;">
<p>এটি প্রথম div এলিমেন্টের প্রথম প্যারাগ্রাফ।</p>
<p>এটি প্রথম div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>
<p>এটি প্রথম div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div>
<p>এটি body এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</body>
</html>
ফলাফল
(an + b) ফর্মূলার ব্যবহার
বিভিন্ন চাইল্ড এলিমেন্ট সিলেক্ট করার ক্ষেত্রে কিভাবে (an + b) ফর্মূলা ব্যবহার করা হয়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :nth-last-child() সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-last-child(3n+2)").css({
"background-color": "green",
"color": "white",
});
});
</script>
</head>
<body>
<div style="border:1px solid green;">
<p>এটি প্রথম প্যারাগ্রাফ।</p>
<p>এটি দ্বিতীয় প্যারাগ্রাফ।</p>
<p>এটি তৃতীয় প্যারাগ্রাফ</p>
<p>এটি চতুর্থ প্যারাগ্রাফ।</p>
<p>এটি পঞ্চম প্যারাগ্রাফ।</p>
<p>এটি ষষ্ঠ প্যারাগ্রাফ।</p>
<p>এটি সপ্তম প্যারাগ্রাফ।</p>
<p>এটি অষ্টম প্যারাগ্রাফ।</p>
<p>এটি নবম প্যারাগ্রাফ।</p>
<p>এটি দশম প্যারাগ্রাফ।</p>
<p>এটি একাদশ প্যারাগ্রাফ।</p>
<p>এটি দ্বাদশ প্যারাগ্রাফ।</p>
<p>এটি ত্রয়োদশ প্যারাগ্রাফ।</p>
<p>এটি চতুর্দশ প্যারাগ্রাফ।</p>
</div>
</body>
</html>
ফলাফল
"even" এবং "odd" এর ব্যবহার
শেষ চাইল্ড থেকে even এবং odd এর মাধ্যমে কিভাবে বিভিন্ন চাইল্ড এলিমেন্ট সিলেক্ট করা যায়, তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি :nth-last-child() সিলেক্টর</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p:nth-last-child(even)").css({
"background-color": "green",
"color": "white",
});
$("p:nth-last-child(odd)").css({
"background-color": "yellow",
"color": "red",
});
});
</script>
</head>
<body>
<div style="border:1px solid green;">
<p>এটি প্রথম প্যারাগ্রাফ।</p>
<p>এটি দ্বিতীয় প্যারাগ্রাফ।</p>
<p>এটি তৃতীয় প্যারাগ্রাফ</p>
<p>এটি চতুর্থ প্যারাগ্রাফ।</p>
<p>এটি পঞ্চম প্যারাগ্রাফ।</p>
<p>এটি ষষ্ঠ প্যারাগ্রাফ।</p>
<p>এটি সপ্তম প্যারাগ্রাফ।</p>
<p>এটি অষ্টম প্যারাগ্রাফ।</p>
<p>এটি নবম প্যারাগ্রাফ।</p>
<p>এটি দশম প্যারাগ্রাফ।</p>
<p>এটি একাদশ প্যারাগ্রাফ।</p>
<p>এটি দ্বাদশ প্যারাগ্রাফ।</p>
<p>এটি ত্রয়োদশ প্যারাগ্রাফ।</p>
<p>এটি চতুর্দশ প্যারাগ্রাফ।</p>
</div>
</body>
</html>
ফলাফল
:nth-child(), :nth-last-child(), :nth-of-type() এবং
:nth-of-last-type() সিলেক্টরের মধ্যে পার্থক্য
নিচের উদাহরণে p:nth-child(2), p:nth-last-child(2), p:nth-of-type(2) এবং
p:nth-of-last-type(2) সিলেক্টরের মধ্যে পার্থক্য দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var btn = $(this).text();
$("p").css("background-color", "white");
$("p" + btn).css("background-color", "green");
});
});
</script>
</head>
<body>
<h3>বডিতে এটি একটি শিরোনাম।</h3>
<p>বডিতে এটি প্রথম প্যারাগ্রাফ।</p>
<p>বডিতে এটি দ্বিতীয় প্যারাগ্রাফ।</p>
<div style="border:1px solid green;">
<span>প্রথম div এর মধ্যে এটি span এলিমেন্ট।</span>
<p>প্রথম div এর মধ্যে প্রথম প্যারাগ্রাফ।</p>
<p>প্রথম div এর মধ্যে দ্বিতীয় প্যারাগ্রাফ।</p>
<p>প্রথম div এর মধ্যে তৃতীয় প্যারাগ্রাফ।</p>
<p>প্রথম div এর মধ্যে শেষ প্যারাগ্রাফ।</p>
<span>প্রথম div এর মধ্যে এটি span এলিমেন্ট।</span>
</div>
<br>
<div style="border:1px solid teal;">
<p>দ্বিতীয় div এর মধ্যে প্রথম প্যারাগ্রাফ।</p>
<p>দ্বিতীয় div এর মধ্যে দ্বিতীয় প্যারাগ্রাফ।</p>
<p>দ্বিতীয় div এর মধ্যে শেষ প্যারাগ্রাফ।</p>
</div>
<p>বডিতে এটি শেষ প্যারাগ্রাফ।</p>
<button>:nth-child(2)</button>
<button>:nth-last-child(2)</button>
<button>:nth-of-type(2)</button>
<button>:nth-last-of-type(2)</button>
</body>
</html>
ফলাফল