CSS এর বিরাট উপকারী কিছু selector, যেগুলা দিয়া অনেক কিছু করা যায়

কী অবস্থা ভাইলোগ? সব ঠিকঠাক? আমি? আমি ভাল আছি।
আগের পোস্টে আমরা আলোচনা করেছিলাম কিভাবে <input type=”checkbox”> -কে css এর মাধ্যমে ডিজাইন করা যায় সে সম্পর্কে। আর খুবই বেসিক একটি উদাহরণ দেখানো হয়েছিল। css এর যে কোডগুলো দেখানো হয়েছিল, তার মধ্যে সর্বশেষ সিলেক্টরটি ছিল এরকম-

#someID:checked + .checkbox-1:after {transform: scale(1);}

এই সিলেক্টরে দুইটা এলিমেন্ট আছে এবং দুইটা এলিমেন্টের মাঝখানে আছে একটা প্লাস চিহ্ন, এইভাবে এই সিলেক্টরটি তৈরি করা হইছে। এই যে এই ধরণের সিলেক্টরগুলা, এগুলা নিয়া w3schools এর একটা পেজ আছে। পেজটাতে এই ধরণের সিলেক্টরগুলার নাম, পিতার নাম, মাতার নাম এবং বংশ পরিচয়সহ বিস্তারিত আলোচনা আছে, এবং প্রতিটার সাথে উদাহরণও দেয়া আছে। একজন ফ্রন্ট-এন্ড ডেভলপারের জন্য এই সিলেক্টরগুলার ব্যবহার সম্পর্কে পূর্ণ অবগত থাকা অতি প্রয়োজন। বিরাট কাজের জিনিস এইগুলা। উদাহরণ দেই, উপ্রে যেই সিলেক্টরটা দিলাম, সেইটা দিয়া শুরু করি।

প্লাস সাইন বা যোগ চিহ্ন। css এর মধ্যে এইটার কাজ কী? কীভাবে এইটাকে ব্যবহার করা হয়?

+ সাইনটি css এর দুইটা এলিমেন্টের মাঝখানে, যেমন-

input + label {background: red}

এর অর্থ- input এর ইমিডিয়েট পরে যে label ট্যাগটি রয়েছে, সেটার ব্যাকগ্রাউন্ড কালার হবে রেড। আল্টিমেটলি, এখানে সিলেক্টর হচ্ছে + সাইনের পরের এলিমেন্টটি, অর্থাৎ- label ট্যাগটি। আর + সাইনের আগের যে এলিমেন্টটি রয়েছে, সেটির সাহায্যেই মূলত আসল সিলেক্টরটিকে ধরা হয়েছে।

এখন প্রশ্ন আসতে পারে যে, একটা input সিলেক্ট করতে হুদাই আম্রা এতো তেনা পেচাবো কেন?
উত্তর: হুদাই তেনা পেচানোর কোন দরকার নাই। যদি দরকার লাগে, তাইলেই পেচাবো।
পরবর্তী প্রশ্ন: দরকার কখন লাগবে?
উত্তর-

এখানে খুবই সিম্পল একটা উদাহরণ দেখানো হইছে, দুইটা অতি সাধারণ এলিমেন্টের সাহায্যে- input এবং label, আপনি চাইলে এই দুইটার জাগায় অন্য যে কোন এলিমেন্ট দিতে পারেন- class, id, tag, pseudo selector আপনের যেই এলিমেন্ট খুশি।

 

আর … এই পোস্টে তো শুধু + সাইনের ব্যাপারে আলোচনা করা হইল। css এর ভাষায় এইটার নাম adjacent sibling combinator,  এই + সাইন ছাড়া আরও অনেক সাইন আছে, যেগুলো দিয়ে আরও অনেক অনেকভাবে css এর selector তৈরি করা যায়, আর সেগুলা আরও অনেক বেশি ইন্ট্যারেস্টিং।

এই + সাইনের নাম যেমন adjacent sibling combinator,  এইভাবে প্রতিটা সিলেক্টরের নামসহ ব্যবহার বুঝতে গেলে আম্রিকার প্রেসিডেন্ট চেঞ্জ হয়া যাইবো। এই জন্য w3schools এর একটা পেইজের লিঙ্ক দিলাম নিচের ইমেজটাতে, ক্লিক করেন, দেখবেন সেখানে প্রতিটা সিলেক্টরের উদাহরণসহ দেয়া আছে। একটা একটা করে ধরেন আর প্র্যাক্টিস করতে থাকেন।

 

কৃতজ্ঞতা

মন্তব্য

মন্তব্য