CSS কম্বিনেটর

একটি কম্বিনেটর হলো এমন কিছু, যা সিলেক্টরগুলোর মধ্যে সম্পর্ক ব্যাখ্যা করে।

একটি CSS সিলেক্টরে একাধিক সিম্পল সিলেক্টর থাকতে পারে। সিম্পল সিলেক্টরগুলোর মধ্যে, আমরা একটি কম্বিনেটর যোগ করতে পারি।

CSS-এ চারটি ভিন্ন কম্বিনেটর আছে:

• ডিসেন্ডেন্ট সিলেক্টর (স্পেস)
• চাইল্ড সিলেক্টর (>)
• অ্যাডজেসেন্ট সিবলিং সিলেক্টর (+)
• জেনারেল সিবলিং সিলেক্টর (~)

---

ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সব ডিসেন্ডেন্ট এলিমেন্টের সাথে মেলে।

নিচের উদাহরণে <div> এলিমেন্টের ভেতরের সব <p> এলিমেন্ট সিলেক্ট করা হয়েছে:

div p {
  background-color: yellow;
}

চাইল্ড সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের চাইল্ড এমন সব এলিমেন্ট সিলেক্ট করে।

নিচের উদাহরণে <div> এলিমেন্টের চাইল্ড এমন সব <p> এলিমেন্ট সিলেক্ট করা হয়েছে:

div > p {
  background-color: yellow;
}

অ্যাডজেসেন্ট সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের ঠিক পাশের সিবলিং এমন সব এলিমেন্ট সিলেক্ট করে।

সিবলিং এলিমেন্টের একই প্যারেন্ট এলিমেন্ট থাকতে হবে, এবং "অ্যাডজেসেন্ট" মানে "ঠিক পরে"।

নিচের উদাহরণে <div> এলিমেন্টের ঠিক পরে থাকা সব <p> এলিমেন্ট সিলেক্ট করা হয়েছে:

div + p {
  background-color: yellow;
}

জেনারেল সিবলিং সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সিবলিং এমন সব এলিমেন্ট সিলেক্ট করে।

নিচের উদাহরণে <div> এলিমেন্টের সিবলিং এমন সব <p> এলিমেন্ট সিলেক্ট করা হয়েছে:

div ~ p {
  background-color: yellow;
}