জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
ফোরাম
 

জেকুয়েরি :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>

ফলাফল





« জেকুয়েরি সিলেক্টরসমূহ