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

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

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



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

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

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

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

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

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

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

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

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

:nth-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-of-type(3)").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>
</div><br>

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

<p>বডিতে এটি শেষ(তৃতীয়) প্যারাগ্রাফ।</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-of-type(2)").css({"background-color": "yellow", "color": "green"});
});
</script>
</head>
<body>

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

<div style="border:1px solid;">
  <span>এটি div এলিমেন্টের একটি span এলিমেন্ট।</span>
  <p>এটি 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>

ফলাফল

(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-of-type(3n+2)").css("background-color", "yellow");
});
</script>
</head>
<body>

<p> p:nth-child(3n+2) প্রত্যেক ৩য় অনুচ্ছেদকে সিলেক্ট করে, যা ২য় অনুচ্ছেদ থাকে শুরু করে। </p>

<div style="border:1px solid;">
  <span>এটি একটি span এলিমেন্ট</span>
  <p>১ম অনুচ্ছেদ</p>
  <p>২য় অনুচ্ছেদ.</p>
  <p>৩য় অনুচ্ছেদ.</p>
  <p>৪র্থ অনুচ্ছেদ.</p>
  <p>৫ম অনুচ্ছেদ.</p>
  <p>৬ষ্ঠ অনুচ্ছেদ.</p>
  <p>৭ম অনুচ্ছেদ.</p>
  <p>৮ম অনুচ্ছেদ.</p>
</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-child(odd)").css("background-color", "green");
    $("p:nth-last-child(even)").css("background-color", "red");
});
</script>
</head>
<body>

<p>body এর প্রথম p এলিমেন্ট এবং প্রথম চাইল্ড(বিজোড়)।</p>
<p>body এর শেষ p এলিমেন্ট এবং দ্বিতীয় চাইল্ড(জোড়)।</p>

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

<div style="border:1px solid;">
  <p>অন্য আরেকটি div এর প্রথম p এলিমেন্ট, এবং দ্বিতীয় চাইল্ড (বিজোড়)।</p>
  <p>অন্য আরেকটি div এর দ্বিতীয় p এলিমেন্ট, এবং তৃতীয় চাইল্ড (জোড়)।</p>
  <p>অন্য আরেকটি div এর তৃতীয় p এলিমেন্ট, এবং চতুর্থ চাইল্ড (বিজোড়)।</p>
  <p>অন্য আরেকটি div এর শেষ 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>
    <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>

ফলাফল

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

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


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