শেখ মাহফুজুর রহমান

সিএসএস কম্বিনেটর সিলেক্টরগুলোর মধ্যে সম্পর্ক নির্দেশ করে। একটি সিএসএস সিলেক্টর একাধিক সিম্পল সিলেক্টর ধারণ করতে পারে। এই সিম্পল সিলেক্টরগুলোর মধ্যে আমরা একটি কম্বিনেটর যোগ করতে পারি। সিএসএস-থ্রি'তে চার প্রকার কম্বিনেটর রয়েছেঃ

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

 

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

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

---

div p {
background-color: yellow;
}

---

 

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

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

---

div > p {
      background-color: yellow;
}

---

 

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

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