সিএসএস কম্বিনেটর - CSS Combinator


কম্বিনেটর হল এক ধরনের সিএসএস সিলেক্টর। সিএসএস স্টাইল কোডে এইচটিএমএল এলিমেন্ট গুলোকে নির্দেশ বা silect করতে এই কম্বিনেটর ব্যবহার করা হয়।


সিএসএস কম্বিনেটর

সিএসএস এর ক্ষেত্রে একাধিক এইচটিএমএল এলিমেন্ট এর জন্য এক সাথে সিলেক্টর ব্যবহার করে স্টাইল কোড লেখা যায়। এগুলো হল আসলে বিশেষ কিছু ছিনহ, যেমন >,, + ইত্যাদি। অর্থাৎ সিএসএস কম্বিনেটর বা combinator হল এমন বিশেষ কিছু ছিনহ যা selector গুলোর মধ্যে সম্পর্ক তৈরি করে।

সিএসএস এর সর্বশেষ সংস্করণ বা verson অর্থাৎ CSS 3.0 তে 4 প্রকার কম্বিনেটর ব্যাবহৃত হয়্‌ এগুলো হল -


বংশধর বা descendant সিলেক্টর

এইচটিএমএল এলিমেন্ট গুলোর নেস্তিং বা nesting এর ক্রম অনুসরন করে সিএসএস এর স্টাইল কোড লেখা যায়। এই সিলেক্টর গুলো বংশধর বা descendant এর মত আচরণ করে কাজ করে বলে এই প্রকার selector কে বংশধর বা descendant সিলেক্টর বলে।

এই প্রকার সিলেক্টর তৈরি করার জন্য প্রতিটি এলিমেন্ট সিলেক্টর এর মাঝে একটি ফাঁকাস্থান বা space ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, এখানে একটি ul ট্যাগের মধ্যস্থিত li ট্যাগের অভ্যন্তরে a ট্যাগের স্টাইল নির্ধারণ করেছে।

উদাহরণ

ul li a {
   color: blue;
   }

কোড এডিটর



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

কোন এইচটিএমএল এলিমেন্ট এর মধ্যস্থিত কোন এলিমেন্টকে সরাসরি নির্দেশ করার পদ্ধতি হল এটি। এই পদ্ধতি তে এইচটিএমএল এলিমেন্ট গুলোর নেস্তিং এর ক্রম অনুসরন করা হয় না, ব্যাপার টা অনেকটা parent-child সম্পর্কের মত বিধায় এই প্রকার সিলেক্টর কে চাইল্ড বা child সিলেক্টর বলা হয়।

এই প্রকার সিলেক্টর তৈরি করার জন্য এলিমেন্ট সিলেক্টর দুটির মাঝে একটি বৃহত্তর বা grater then অর্থাৎ > ছিনহ ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, এখানে সরাসরি একটি ul ট্যাগের অভ্যন্তরে a ট্যাগের জন্য স্টাইল নির্ধারণ করেছে।

উদাহরণ

ul > a {
   color: blue;
   }

কোড এডিটর



সহোদর বা adjacent sibling সিলেক্টর

এই প্রকার সিলেক্টর, কোন এইচটিএমএল এলিমেন্টের পরবর্তী প্রথম এলিমেন্টকে নির্দেশ করার জন্য ব্যবহার করা হয়। এই সিলেক্টর গুলো সহোদর সম্পর্কের মত আচরণ করে বলে এদেরকে সহোদর বা adjacent sibling সিলেক্টর বলা হয়। এক্ষেত্রে এইচটিএমএল এলিমেন্ট গুলো অবশ্যই একই parent এলিমেন্টের অর্ন্তভূক্ত হতে হবে এবং এটি কেবল এর পরবর্তী এলিমেন্টটিকে সিলেক্ট করে।

এই প্রকার সিলেক্টর তৈরি করার জন্য এলিমেন্ট সিলেক্টর দুটির মাঝে একটি যোগ বা Plus অর্থাৎ + ছিনহ ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, এখানে একটি li ট্যাগের পরবর্তী a ট্যাগের জন্য স্টাইল নির্ধারণ করা হয়েছে।

উদাহরণ

li + a {
   color: blue;
   }

কোড এডিটর



সাধারণ সহোদর বা general sibling সিলেক্টর

এই প্রকার সিলেক্টর, কোন এইচটিএমএল এলিমেন্টের পরবর্তী সকল এলিমেন্ট গুলোকে নির্দেশ করার জন্য ব্যবহার করা হয়। এই সিলেক্টর গুলো সকল সহোদর এর সম্পর্কের মত আচরণ করে বলে এদেরকে সাধারণ সহোদর বা general sibling সিলেক্টর সিলেক্টর বলা হয়। এক্ষেত্রে এইচটিএমএল এলিমেন্ট গুলো অবশ্যই একই parent এলিমেন্টের অর্ন্তভূক্ত হতে হবে। এটি কেবল এর পরবর্তী এলিমেন্ট গুলোকেই সিলেক্ট করে।

এই প্রকার সিলেক্টর তৈরি করার জন্য এলিমেন্ট সিলেক্টর দুটির মাঝে একটি সমানুপাতিক বা infinity অর্থাৎ ~ ছিনহ ব্যবহার করা হয়।

নিচে একটি উদাহরন দেখুন, এখানে একটি li ট্যাগের পরবর্তী সকল a ট্যাগের জন্য স্টাইল নির্ধারণ করা হয়েছে।

উদাহরণ

li ~ a{
   border: 1px solid blue;
   }

কোড এডিটর



সিএসএস এর সকল কম্বিনেটর

প্রোপার্টিউদাহরনবর্ণনা
space
>
+
~