X

X

X

CSS সিলেক্টর সংযোজক (Combinators)


CSS Combinators (সমন্বয়ক)

দুই বা ততোধিক ইলামেন্ট সিলেক্টরের মধ্যে সম্পর্ক বর্ণনা বা স্থাপণ করার জন্য Combinator ব্যবহার করা হয়।

কোনো CSS selector একাধিক সিলেক্টর ধারণ করতে পারে। এদের সংযোগ করার জন্য Combinator ব্যবহার করা হয়।

CSS3 -এ চার ধরণের সিলেক্টর কম্বাইনেটর রয়েছে:

  • descendant selector (space) (উত্তরসূরী)
  • child selector (>) (সন্তান)
  • adjacent sibling selector (+) (পাশাপাশি / প্রতিবেশি / ভাইবোন)
  • general sibling selector (~) (সাধারণ / আমজনতা)

Descendant Selector

এই সিলেক্টর দিয়ে, কোনো ইলামেন্টর অভ্যন্তরীণ সব ইলামেন্টকে সিলেক্ট করা হয়।

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

Code Example

<style>
div p {
    background-color: yellow;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Child Selector

সরাসরি কোনো ইলামেন্টর সন্তান ইলামেন্টকে সিলেক্ট করার জন্য এই সিলেক্টর ব্যবহার করা হয়।

নিচের উদাহরণে <div> element এর সরাসরি চাইল্ড <p> element -গুলোকে সিলেক্ট করা হয়েছে:

Code Example

<style>
div > p {
    background-color: yellow;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Adjacent Sibling Selector

ভাইবোন সম্পর্কিত ইলামেন্টকে সিলেক্ট করার জন্য এই সিলেক্টর ব্যবহার করা হয়।

এক্ষেত্রে কাংখিত ইলামেন্টগুলোকে অবশ্যই একই ইলামেন্টর সরাসরি চাইল্ড / সন্তান হতে হবে, এবং তাদেরকে পাশিপাশি অবস্থান করতে হবে।

নিচের উদাহরণে <div> elements পাশাপাশি সব <p> element গুলোকে সিলেক্ট করা হয়েছে:

Code Example

<style>
div + p {
    background-color: yellow;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


General Sibling Selector

এক্ষেত্রে পাশিপাশি অবস্থানরত ভাইবোন বা সিবলিং হওয়ার প্রয়োজন নাই। শুধুমাত্র একটি নির্দিষ্ট ইলামেন্টের চাইল্ড হলেই হলো।

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

Code Example

<style>
div ~ p {
    background-color: yellow;
}
</style>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


নিজে নিজে চেষ্টা করুণ!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »