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

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

ফলাফল





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