শেখ মাহফুজুর রহমান
সিএসএস কম্বিনেটর সিলেক্টরগুলোর মধ্যে সম্পর্ক নির্দেশ করে। একটি সিএসএস সিলেক্টর একাধিক সিম্পল সিলেক্টর ধারণ করতে পারে। এই সিম্পল সিলেক্টরগুলোর মধ্যে আমরা একটি কম্বিনেটর যোগ করতে পারি। সিএসএস-থ্রি’তে চার প্রকার কম্বিনেটর রয়েছেঃ
- ডিসেন্ডেন্ট সিলেক্টর
- চাইল্ড সিলেক্টর
- অ্যাডজাসেন্ট সিবলিং সিলেক্টর
- জেনেরাল সিবলিং সিলেক্টর
ডিসেন্ডেন্ট সিলেক্টর
ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো ডিসেন্ডেন্ট এলিমেন্টকে ম্যাচ বা সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ভিতরের সবগুলো <p> এলিমেন্টকে সিলেক্ট করা হয়েছেঃ
div p {
background-color: yellow;
}
চাইল্ড সিলেক্টর
চাইল্ড সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের ঠিক ভিতরের চাইল্ড এলিমেন্টগুলোকে সিলেক্ট করে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক ভিতরের অর্থাৎ এর ইমিডিয়েট সন্তান <p> (এখানে p ভিতর অন্য কোন p থাকলে সিলেক্ট হবেনা) এলিমেন্টগুলোকে সিলেক্ট করা হয়েছেঃ
div > p {
background-color: yellow;
}
অ্যাডজাসেন্ট সিবলিং সিলেক্টর
অ্যাডজাসেন্ট সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের অ্যাডজাসেন্ট সিবলিং ( যেমন <div> এর পর <p> এলিমেনটি থাকলে <p> হলো <div> এর সিবলিং বা সহোদর) এলিমেন্টগুলোকে সিলেক্ট করে। সিবলিং এলিমেন্টগুলোর অবশ্যই একই প্যারেন্ট থাকতে হবে অর্থাৎ সেগুলোকে একই এলিমেন্টের ভিতরে অন্তঃভূর্ক্ত হতে হবে এবং অ্যাডজাসেন্টের মানে হলো ঠিক পরে এসেছে। নিচের উদাহরণে <div> এলিমেন্টের ঠিক পরের সবগুলো <p> এলিমেন্টগুলোকে সিলেক্ট করা হয়েছেঃ
div + p {
background-color: yellow;
}
জেনারেল সিবলিং সিলেক্টর
জেনারেল সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো সিবলিংকে সিলেক্ট করে। নিচের উদাহরণে
এলিমেন্টের সবগুলোএলিমেন্টকে সিলেক্ট করা হয়েছেঃ
div ~ p {
background-color: yellow;
}
