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



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


সিএসএস সিলেক্টরের ক্ষেত্রে এক বা একাধিক এলিমেন্টকে একত্রে সিলেক্ট বা নির্দেশ করা যায়। আমরা দুইটি এলিমেন্টে সিলেক্টরের মাঝে কম্বিনেটর ব্যবহার করতে পারি।
সিএসএস ৩ এ চারটি ভিন্ন ধরনের কম্বিনেটর রয়েছে -

বংশধর সিলেক্টর বা descendant selector(space)
চাইল্ড সিলেক্টর বা child selector(>)
সহোদর সিলেক্টর বা adjacent sibling selector(+)
সাধারণ সহোদর সিলেক্টর বা general sibling selector(~)


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

একটি এলিমেন্টের মধ্যে অবস্থিত সকল বংশধর বা ডিসেন্ডেন্ট এলিমেন্টকে সিলেক্ট করার জন্য ডিসেন্ডেন্ট সিলেক্টর ব্যবহার করা হয়। নিচের উদাহরণে বংশধর বা descendant সিলেক্টর ব্যবহার করে <div> এলিমেন্টের মধ্যে অবস্থিত সকল <p> এলিমেন্টকে সিলেক্ট করে দেখানো হলো।

উদাহরণ

div p{
background-color: teal;
}




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

একটি এলিমেন্টের মধ্যে অবস্থিত সরাসরি চাইল্ড এলিমেন্ট গুলো নির্দেশ করতে চাইল্ড সিলেক্টর ব্যবহার করা হয়। নিচের উদাহরণে <div> এলিমেন্টের মধ্যকার <p> এলিমেন্টগুলো থেকে যেগুলো <div> এর সরাসরি চাইল্ড শুধুমাত্র সেগুলোকে নির্দেশ করবে।

উদাহরণ

div > p {
background-color: teal;
}




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

একটি এলিমেন্টের পরবর্তী প্রথম সিবলিং এলিমেন্টকে নির্দেশ করার জন্য সহোদর বা adjacent sibling সিলেক্টর ব্যবহার করা হয়।

সিবলিং এলিমেন্ট গুলো অবশ্যই একই parent এলিমেন্টের অর্ন্তভূক্ত হতে হবে এবং adjacent sibling - এর ক্ষেত্রে এটি শুধুমাত্র এর পরবর্তী এলিমেন্টটিকে সিলেক্ট করবে। নিচের উদাহরণে শুধুমাত্র <div> এলিমেন্টের পরবর্তী সিবলিং <p> এলিমেন্টটিকে নির্দেশ করবে।

উদাহরণ

div + p {
background-color: teal;
}




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

কোন এলিমেন্টের পরবর্তী সকল সহোদর এলিমেন্টকে সিলেক্ট বা নির্ধারণ করার জন্য সাধারণ সহোদর সিলেক্টর বা general sibling selector ব্যবহার করা হয়।

নিচের উদাহরণে <div> এলিমেন্টের পরবর্তী সকল সিবলিং <p> এলিমেন্ট গুলো নির্দেশ করে।

উদাহরণ

div ~ p{
background-color: teal;
}









এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Report or suggest about this page

Copyright 2016-2018 by websschool.com, All Rights Reserved.