সিএসএস কম্বিনেটর
সিএসএস কম্বিনেটর
সিএসএস সিলেক্টরের ক্ষেত্রে এক বা একাধিক এলিমেন্টকে একত্রে সিলেক্ট করা যায়। আমরা দুইটি এলিমেন্টে সিলেক্টরের মাঝে কম্বিনেটর ব্যবহার করতে পারি।
সিএসএস(৩) এ চারটি ভিন্ন কম্বিনেটর রয়েছেঃ
- বংশধর সিলেক্টর - descendant selector(space)
- চাইল্ড সিলেক্টর - child selector(>)
- সহোদর সিলেক্টর - adjacent sibling selector(+)
- সাধারণ সহোদর সিলেক্টর - general sibling selector(~)
বংশধর(descendant) সিলেক্টর
একটি এলিমেন্টের মধ্যে অবস্থিত সকল বংশধর বা ডিসেন্ডেন্ট এলিমেন্টকে সিলেক্ট করার জন্য ডিসেন্ডেন্ট সিলেক্টর ব্যবহার করা হয়।
নিম্নের উদাহরণটিতে বংশধর(descendant) সিলেক্টর ব্যবহার করে <div> এলিমেন্টের মধ্যে অবস্থিত সকল <p> এলিমেন্টকে সিলেক্ট করে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div p {
background: green;
color: white;
border: 3px dotted red;
}
</style>
</head>
<body>
<div>
<p>এই প্যারাগ্রাফটি div এর ডিসেন্ডেন্ট তাই এটি সিলেক্ট হবে।</p>
<p>এই প্যারাগ্রাফটিও div এর ডিসেন্ডেন্ট তাই এটিও সিলেক্ট হবে।</p>
<span><p>এই প্যারাগ্রাফটিও div এর ডিসেন্ডেন্ট তাই এটিও সিলেক্ট হবে।</p></span>
</div>
<p>এই প্যারাগ্রাফটি div এর বাহিরে তাই এটি সিলেক্ট হবেনা।</p>
<p>এই প্যারাগ্রাফটিও div এর বাহিরে তাই এটিও সিলেক্ট হবে না।</p>
</body>
</html>
ফলাফল
চাইল্ড(child) সিলেক্টর
একটি এলিমেন্টের মধ্যে অবস্থিত সরাসরি চাইল্ড এলিমেন্ট গুলো সিলেক্ট করতে চাইল্ড সিলেক্টর ব্যবহার করা হয়।
নিম্নের উদাহরণটিতে <div> এলিমেন্টের মধ্যের <p> এলিমেন্টগুলো থেকে যেগুলো <div> এর সরাসরি চাইল্ড সেগুলোকে সিলেক্ট করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div > p {
background: green;
color: white;
border: 3px dotted red;
}
</style>
</head>
<body>
<div>
<p>এই প্যারাগ্রাফটি div এর সরাসরি চাইল্ড তাই এটি সিলেক্ট হবে।</p>
<p>এই প্যারাগ্রাফটওি div এর সরাসরি চাইল্ড তাই এটিও সিলেক্ট হবে।</p>
<span><p>এই প্যারাগ্রাফটি div এর সরাসরি চাইল্ড এলিমেন্ট নয় তাই এটি সিলেক্ট হবে না।</p></span>
</div>
<p>এই প্যারাগ্রাফটি div এর বাহিরে তাই এটি সিলেক্ট হবে না।</p>
<p>এই প্যারাগ্রাফটিও div এর বাহিরে তাই এটিও সিলেক্ট হবে না।</p>
</body>
</html>
ফলাফল
সহোদর(adjacent sibling) সিলেক্টর
একটি এলিমেন্টের পরবর্তী প্রথম সিবলিং এলিমেন্টকে সিলেক্ট করার জন্য সহোদর(adjacent sibling) সিলেক্টর ব্যবহার করা হয়।
সিবলিং এলিমেন্ট গুলো অবশ্যই একই প্যারেন্ট এলিমেন্টের অর্ন্তভূক্ত হতে হবে এবং adjacent sibling - এর ক্ষেত্রে এটি শুধুমাত্র এর পরবর্তী এলিমেন্টটিকে সিলেক্ট করবে।
নিম্নের উদাহরণটিতে শুধুমাত্র <div> এলিমেন্টের পরবর্তী সিবলিং <p> এলিমেন্টটিকে সিলেক্ট করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div + p {
background: green;
color: white;
border: 3px dotted red;
}
</style>
</head>
<body>
<div>
<p>এই প্যারাগ্রাফটি div এর চাইল্ড তাই এটি সিলেক্ট হবে না।</p>
<p>এই প্যারাগ্রাফটওি div এর চাইল্ড তাই এটিও সিলেক্ট হবে না।</p>
<span><p>এই প্যারাগ্রাফটি div এর উত্তরসূরী তাই এটি সিলেক্ট হবে না।</p></span>
</div>
<p>এই প্যারাগ্রাফটি div এর পরবর্তী সহোদর এলিমেন্ট, তাই এটি সিলেক্ট হবে।</p>
<p>এই প্যারাগ্রাফটি div এর পরবর্তী সহোদর নয়, তাই এটি সিলেক্ট হবে না।</p>
</body>
</html>
ফলাফল
সাধারণ সহোদর(general sibling) সিলেক্টর
একটি এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট করার জন্য জেনারেল সিবলিং সিলেক্টর ব্যবহার করা হয়।
নিম্নের উদাহরণটিতে <div> এলিমেন্টের পরবর্তী সকল সিবলিং <p> এলিমেন্ট গুলো সিলেক্ট করবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
div ~ p {
background: green;
color: white;
border: 3px dotted red;
}
</style>
</head>
<body>
<div>
<p>এই প্যারাগ্রাফটি div এর চাইল্ড তাই এটি সিলেক্ট হবে না।</p>
<p>এই প্যারাগ্রাফটওি div এর চাইল্ড তাই এটিও সিলেক্ট হবে না।</p>
<span><p>এই প্যারাগ্রাফটি div এর উত্তরসূরী তাই এটি সিলেক্ট হবে না।</p></span>
</div>
<p>এই প্যারাগ্রাফটি div এর সাধারণ সহোদর(genaral sibling) তাই এটি সিলেক্ট হবে।</p>
<p>এই প্যারাগ্রাফটিও div এর সাধারণ সহোদর(genaral sibling) তাই এটিও সিলেক্ট হবে।</p>
</body>
</html>
ফলাফল