স্যাট একাডেমী
শিক্ষা নিয়ে বাণিজ্য নয়, আসুন শিক্ষা বাণিজ্যকে "না" বলি।
Facebook Twitter Google LinkedIn
☰ জেকুয়েরি জাভাস্ক্রিপ্ট এঙ্গুলার এইচটিএমএল সিএসএস বুটস্ট্রাপ
লগইন
টিউটোরিয়াল
 

জেকুয়েরি :nth-last-of-type() সিলেক্টর

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



সংজ্ঞা এবং ব্যবহার

:nth-last-of-type(n) সিলেক্টর প্যারেন্টের একটি নির্দিষ্ট ধরনের এলিমেন্টগুলোকে শেষ চাইল্ড থেকে গুনে nতম এলিমেন্টকে সিলেক্ট করে।

টিপস: ধরন নির্বিশেষে প্যারেন্টের শেষ চাইল্ড থেকে গুনে nতম এলিমেন্টকে সিলেক্ট করার জন্য :nth-last-child() সিলেক্টর ব্যবহার করুন।

সিনট্যাক্স ও ব্যাখ্যা

:nth-last-of-type(n|even|odd|formula)

প্যারামিটার ও তাদের ভ্যালু

নিচের টেবিলে :nth-last-of-type()সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
n যেই এলিমেন্টকে সিলেক্ট করা হবে তার ইনডেক্স নাম্বার হবে।

অবশ্যই সংখ্যা হতে হবে। প্রথম এলিমেন্টের ইনডেক্সের নাম্বার হবে ১।
even প্রত্যেক জোড় চাইল্ডকে এলিমেন্টকে সিলেক্ট করে
odd প্রত্যেক বিজোড় চাইল্ডকে এলিমেন্টকে সিলেক্ট করে।
formula (an + b) ফর্মূলার মাধ্যমে কোন চাইল্ড এলিমেন্টকে সিলেক্ট করা হবে তা নির্দিষ্ট করে। উদাহরণ: p:nth-last-child(3n+2) সিলেক্টর দ্বিতীয় শেষ প্যারাগ্রাফ থেকে শুরু করে তৃতীয় প্যারাগ্রাফকে সিলেক্ট করে।

:nth-last-of-type() সিলেক্টরসংক্রান্ত উদাহরণ

শেষ চাইল্ড থেকে গুনে প্যারেন্ট এলিমেন্টের <p> এলিমেন্টগুলো মধ্যে তৃতীয় <p> এলিমেন্ট সিলেক্ট:

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("p:nth-last-of-type(3)").css({"background-color": "green", "color": "white"});
});
</script>
</head>
<body>

<h3>এটি body এলিমেন্টের একটি হেডিং</h3>
<p>এটি body এলিমেন্টের প্রথম প্যারাগ্রাফ (এবং শেষ চাইল্ড থেকে গুনলে body এর তৃতীয় চাইল্ড)।</p>
<p>এটি body এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>

<div style="border:1px solid;">
  <span>এটি div এলিমেন্টের একটি span এলিমেন্ট।</span>
  <p>এটি div এলিমেন্টের প্রথম প্যারাগ্রাফ (এবং শেষ চাইল্ড থেকে গুনলে div এর তৃতীয় চাইল্ড)।</p>
  <p>এটি div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>
  <p>এটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div><br>

<div style="border:1px solid;">
  <p>এটি অন্য একটি div এলিমেন্টের প্রথম প্যারাগ্রাফ (এবং শেষ চাইল্ড থেকে গুনলে এটি তৃতীয় প্যারাগ্রাফ)।</p>
  <p>এটি অন্য একটি div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ।</p>
  <p>এটি অন্য একটি div এলিমেন্টের শেষ প্যারাগ্রাফ।</p>
</div>

<p>এটি body এলিমেন্টের শেষ প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

শেষ চাইল্ড থেকে গুনে সকল <div> এলিমেন্টের <p> এলিমেন্টগুলো মধ্যে প্রথম <p> এলিমেন্ট সিলেক্ট

কিভাবে শেষ চাইল্ড থেকে গুনে সকল <div> এলিমেন্টের <p> এলিমেন্টগুলো মধ্যে প্রথম <p> এলিমেন্ট সিলেক্ট করা যায়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("div p:nth-last-of-type(1)").css("background-color", "yellow");
});
</script>
</head>
<body>

<h3>বডিতে এটি একটি শিরোনাম।</h3>
<p>বডিতে এটি প্রথম প্যারাগ্রাফ। </p>
<p>বডিতে এটি দ্বিতীয় প্যারাগ্রাফ।</p>

<div style="border:1px solid;">
  <p>ডিভ(div)-এর মধ্যে প্রথম প্যারাগ্রাফ।</p>
  <p>ডিভ(div)-এর মধ্যে দ্বিতীয় প্যারাগ্রাফ।</p>
  <p>ডিভ(div)-এর মধ্যে শেষ প্যারাগ্রাফ(এবং লাস্ট চাইল্ড  হিসেবে ডিভের মধ্যে প্রথম প্যারাগ্রাফ,)</p>
  <span>ডিভ(div)-এর মধ্যে স্পেন(span)এলিমেন্ট</span>
</div><br>

<div style="border:1px solid;">
      <p>অন্য ডিভ(div)-এর মধ্যে প্রথম প্যারাগ্রাফ।</p>
  <p>অন্য ডিভ(div)-এর মধ্যে দ্বিতীয় প্যারাগ্রাফ।</p>
  <p>অন্য ডিভ(div)-এর মধ্যে শেষ প্যারাগ্রাফ((এবং লাস্ট চাইল্ড  হিসেবে ডিভের মধ্যে প্রথম প্যারাগ্রাফ)</p>
</div>

<p>বডিতে এটি শেষ প্যারাগ্রাফ।</p>

</body>
</html>

ফলাফল

(an + b) ফর্মূলার ব্যবহার

কিভাবে শেষ চাইল্ড থেকে গুনা শুরু করে (an + b) ফর্মূলার মাধ্যমে বিভিন্ন চাইল্ড এলিমেন্ট সিলেক্ট করা যায়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("p:nth-last-of-type(3n+2)").css({"background-color": "green", "color": "white"});
});
</script>
</head>
<body>

<p>p:nth-child(3n+2) প্রত্যেক তৃতীয় প্যারাগ্রাফকে সিলেক্ট করে, যা শেষ থেকে দ্বিতীয় প্যারাগ্রাফ থেকে শুরু হয় (এই ক্ষেত্রে সপ্তম p এলিমেন্ট)।

<div style="border:1px solid;">
  <p>প্রথম প্যারাগ্রাফ।</p>
  <p>দ্বিতীয় প্যারাগ্রাফ।</p>
  <p>তৃতীয় প্যারাগ্রাফ।</p>
  <p>চতুর্থ প্যারাগ্রাফ।</p>
  <p>পঞ্চম প্যারাগ্রাফ।</p>
  <p>ষষ্ঠ প্যারাগ্রাফ।</p>
  <p>সপ্তম প্যারাগ্রাফ।</p>
  <p>অষ্টম প্যারাগ্রাফ।</p>
  <span>এটি span এলিমেন্ট।</span>
</div><br>

</body>
</html>

ফলাফল

"even" এবং "odd" ব্যবহার

কিভাবে শেষ চাইল্ড থেকে গুনা শুরু করে even এবং odd ব্যবহারের মাধ্যমে বিভিন্ন চাইল্ড এলিমেন্ট সিলেক্ট করা যায়।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script>
$(document).ready(function(){
    $("p:nth-last-of-type(odd)").css("background-color", "red");
    $("p:nth-last-of-type(even)").css("background-color", "green");
});
</script>
</head>
<body>

<p>এটি body এর প্রথম প্যারাগ্রাফ (জোড়)।</p>
<p>এটি body এর শেষ প্যারাগ্রাফ (বিজোড়)।</p>

<div style="border:1px solid;">
  <p>এটি div এলিমেন্টের প্রথম প্যারাগ্রাফ(জোড়)।</p>
  <p>এটি div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ(বিজোড়)।</p>
  <p>এটি div এলিমেন্টের তৃতীয় প্যারাগ্রাফ(জোড়)।</p>
  <p>এটি div এলিমেন্টের শেষ প্যারাগ্রাফ(বিজোড়)।</p>
  <span>এটি একটি span এলিমেন্ট।</span>
</div><br>

<div style="border:1px solid;">
  <p>এটি অন্য আরেকটি div এলিমেন্টের প্রথম প্যারাগ্রাফ(জোড়)।</p>
  <p>এটি অন্য আরেকটি div এলিমেন্টের দ্বিতীয় প্যারাগ্রাফ(বিজোড়)।</p>
  <p>এটি অন্য আরেকটি div এলিমেন্টের তৃতীয় প্যারাগ্রাফ(জোড়)।</p>
  <p>এটি অন্য আরেকটি div এলিমেন্টের শেষ প্যারাগ্রাফ(বিজোড়)।</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>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>জেকুয়েরির উদাহরণ</title>
<script src="http://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;">
  <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;">
     <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>

ফলাফল

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



আমাদের টিউটোরিয়াল সমূহ


ক্লায়েন্ট সাইড টিউটোরিয়াল
HTML টিউটোরিয়াল
CSS টিউটোরিয়াল
BootStrap টিউটোরিয়াল
JavaScript টিউটোরিয়াল
jQuery টিউটোরিয়াল
AngualarJs টিউটোরিয়াল
সার্ভার সাইড টিউটোরিয়ায়াল
পিএইচপি টিউটোরিয়াল
এসকিউএল টিউটোরিয়াল ওয়ার্ডপ্রেস টিউটোরিয়াল
প্রোগ্রামিং টিউটোরিয়ায়াল
সি টিউটোরিয়াল
পাইথন টিউটোরিয়াল
অন্যান্য
চাকুরীর প্রশ্ন-উত্তর
ফোরাম
ব্লগ
© স্যাট একাডেমী