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