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

জেকুয়েরি :only-child সিলেক্টর


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



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

:only-child সিলেক্টর ঐসকল এলিমেন্টগুলোকে সিলেক্ট করে যেগুলো তার প্যারেন্ট এলিমেন্টের একমাত্র চাইল্ড এলিমেন্ট।



সিনট্যাক্স

$(":only-child")


:only-child সিলেক্টর সংক্রান্ত উদাহরণ

প্যারেন্ট এলিমেন্টের একমাত্র চাইল্ড <div> এলিমেন্ট সিলেক্ট

:only-child সিলেক্ট ব্যবহার করে কিভাবে প্যারেন্ট এলিমেন্টের একমাত্র চাইল্ড <div> সিলেক্ট করা যায় তা নিচের উদাহরণে দেখানো হলোঃ

উদাহরণ

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

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

</body>
</html>

ফলাফল





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