সিএসএস কম্বিনেটরস | সিএসএস এর পার্ট ২৩



কম্বিনেটরস


CSS কম্বিনেটর সিলেক্টরগুলোর মধ্যে সম্পর্ক নির্দেশ করে। একটি সিএসএস সিলেক্টর একাধিক সিম্পল সিলেক্টর ধারণ করতে পারে। এই সিম্পল সিলেক্টরগুলোর মধ্যে আমরা একটি কম্বিনেটর যোগ করতে পারি।

CSS এ চার প্রকার কম্বিনেটর রয়েছেঃ
i) ডিসেন্ডেন্ট সিলেক্টর
ii) চাইল্ড সিলেক্টর
iii) অ্যাডজাসেন্ট সিবলিং সিলেক্টর
iv) জেনেরাল সিবলিং সিলেক্টর

নিচে এর বিস্তারিত আলোচনা করা হল--

ডিসেন্ডেন্ট সিলেক্টর


ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো ডিসেন্ডেন্ট এলিমেন্টকে ম্যাচ বা সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ভিতরের সবগুলো <p> এলিমেন্টকে সিলেক্ট করা হয়েছে।


<head>
<style>
div p {
    background-color: yellow;
}
</style>
</head>
উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
div p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <span><p>Paragraph 2 in the div.</p></span>
</div>

<p>Paragraph 3. Not in a div.</p>

</body>
</html>

চাইল্ড সিলেক্টর


চাইল্ড সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের ঠিক ভিতরের চাইল্ড এলিমেন্টগুলোকে সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক ভিতরের অর্থাৎ এর ইমিডিয়েট সন্তান <p> (এখানে p ভিতর অন্য কোন p থাকলে সিলেক্ট হবেনা) এলিমেন্টগুলোকে সিলেক্ট করা হয়েছে।

<head>
<style>
div > p {
    background-color: yellow;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
div > p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
  <span><p>Paragraph 2 in the div.</p></span>
</div>

<p>Paragraph 3. Not in a div.</p>

</body>
</html>




অ্যাডজাসেন্ট সিবলিং সিলেক্টর


অ্যাডজাসেন্ট সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের অ্যাডজাসেন্ট সিবলিং ( যেমন <div> এর পর <p> এলিমেনটি থাকলে <p> হলো <div> এর সিবলিং বা সহোদর) এলিমেন্টগুলোকে সিলেক্ট করে। সিবলিং এলিমেন্টগুলোর অবশ্যই একই প্যারেন্ট থাকতে হবে অর্থাৎ সেগুলোকে একই এলিমেন্টের ভিতরে অন্তঃভূর্ক্ত হতে হবে এবং অ্যাডজাসেন্টের মানে হলো ঠিক পরে এসেছে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক পরের সবগুলো <p> এলিমেন্টগুলোকে সিলেক্ট করা হয়েছে।

<head>
<style>
div + p {
    background-color: yellow;
}
</style>
</head>


উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
div + p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
</div>

<p>Paragraph 3. Not in a div.</p>

</body>
</html>


জেনারেল সিবলিং সিলেক্টর


জেনারেল সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো সিবলিংকে সিলেক্ট করে। নিচের উদাহরণে এলিমেন্টের সবগুলোএলিমেন্টকে সিলেক্ট করা হয়েছে।

<head>
<style>
div ~ p {
    background-color: yellow;
}
</style>
</head>

উদাহরণ :-

<!DOCTYPE html>
<html>
<head>

<style>
div ~ p {
    background-color: yellow;
}
</style>
</head>
<body>

<div>
  <p>Paragraph 1 in the div.</p>
</div>

<p>Paragraph 2. Not in a div.</p>

</body>
</html>




আপনি এই কোড আমাদের সাইটে বসানো এইচটিএমএল এডিটর দিয়ে রান করাতে পারেন। এইচটিএমএল এডিটরে যেতে এখানে ক্লিক করুন



Comments

Popular posts from this blog

How to Show Your Posts on Google's First Page?

31 True Science Facts You Didn't Know...Until Now -

সৌরজগৎ এ প্রথম আন্তঃনাক্ষত্রিক গ্রহাণু