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

জেকুয়েরি parent descendant সিলেক্টর


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



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

("parent descendant") সিলেক্টরের মাধ্যমে নির্দিষ্ট প্যারেন্ট এলিমেন্টের নির্দিষ্ট উত্তরসূরি এলিমেন্টের সবগুলোকে সিলেক্ট করা হয়।

উত্তরসূরি এলিমেন্ট বলতে একটি এলিমেন্টের চাইল্ড, গ্রান্ডচাইল্ড, গ্রেট-গ্রান্ডচাইল্ড এলিমেন্টকে ইত্যাদিকে বুঝায়।



সিনট্যাক্স

("parent descendant")


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

নিচের টেবিলে parent descendant সিলেক্টরে ব্যবহৃত প্যারামিটার এবং প্যারামিটারের সম্ভাব্য ভ্যালু গুলো দেখানো হলোঃ

প্যারামিটার বিবরণ
parent আবশ্যক। যেই যেই এলিমেন্টটি সিলেক্ট করা হবে তার প্যারেন্ট এলিমেন্টকে নির্দেশ করে।
descendant আবশ্যক। যেই এলিমেন্টকে (নির্দিষ্ট প্যারেন্ট এলিমেন্টের) সিলেক্ট করা হবে সেটিকে নির্দিশ করে।


parent descendant সিলেক্টর সংক্রান্ত উদাহরণ

সকল <p> এলিমেন্টকে সিলেক্ট, যেগুলো <section> এলিমেন্টের উত্তরসূরি

নিচের উদাহরণে parent descendant সিলেক্টরের ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>জেকুয়েরি parent child সিলেক্টর</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("section p").css({
        "background-color": "green",
        "color": "white",
    });
  });
  </script>
</head>
<body>

  <h3>$("div span") কি সিলেক্ট করবে?</h3>
  <p>এটি বডির প্রথম প্যারাগ্রাফ।</p>

  <section style="border:1px solid black;">
    <p>এটি সেকশনের প্রথম প্যারাগ্রাফ।</p>
    <div>
      <h3>হেডিং</h3>
      <p>প্যারাগ্রাফ</p>
    </div>
  </section>

</body>
</html>

ফলাফল





সকল <li> এলিমেন্টকে সিলেক্ট, যেগুলো <section> এলিমেন্টের উত্তরসূরি এলিমেন্ট

কিভাবে সকল <li> এলিমেন্টকে সিলেক্ট করে, যেগুলো <section> এলিমেন্টের উত্তরসূরি এলিমেন্ট, তা নিচের উদাহরনে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>জেকুয়েরি parent child সিলেক্টর</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $("section li").css({
        "background-color": "green",
        "color": "white",
        "border": "1px solid black",
    });
  });
  </script>
</head>
<body>

  <section>
    <ul>
      <li>লিস্ট আইটেম</li>
      <li>লিস্ট আইটেম</li>
    </ul>
    <li>লিস্ট আইটেম</li>
    <div>
      <ul>
        <li>লিস্ট আইটেম</li>
        <li>লিস্ট আইটেম</li>
      </ul>
    </div>
  </section>
  <li>লিস্ট আইটেম</li>
  <li>লিস্ট আইটেম</li>

</body>
</html>

ফলাফল





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