সিএসএস কম্বিনেটরস (CSS Combinators)

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

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

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

 

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

ডিসেন্ডেন্ট সিলেক্টর একটি নির্দিষ্ট এলিমেন্টের সবগুলো ডিসেন্ডেন্ট এলিমেন্টকে ম্যাচ বা সিলেক্ট করে। নিচের উদাহরণে <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;
}


Permanent link to this article: http://bangla.sitestree.com/%e0%a6%b8%e0%a6%bf%e0%a6%8f%e0%a6%b8%e0%a6%8f%e0%a6%b8-%e0%a6%95%e0%a6%ae%e0%a7%8d%e0%a6%ac%e0%a6%bf%e0%a6%a8%e0%a7%87%e0%a6%9f%e0%a6%b0%e0%a6%b8-css-combinators/