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