আমরা প্রায়সময়ই লক্ষ্য করি যে আমাদের দেশের বেশীরভাগ ডেভেলপারই নিচের বেসিক সব ক্যাটাগরির সিএসএস স্টাইলিং এর পরে তালগোল করে ফেলেন।
- ট্যাগ সিলেক্টর
- আইডি সিলেক্টর
- ক্লাস সিলেক্টর
এছাড়াও আরো অনেক প্রকারেই সিএসএস স্টাইল লেখা যায় যেমন মিক্সড সিলেক্টর । আইডি আর ক্লাস কিংবা ট্যাগ ক্লাস ইত্যাদিকে এক সাথে বাইন্ড করে দিবার জন্য।
অনেক সময় আরো বিশেষ বিশেষ প্রয়োজনে আমাদের সিলেক্টরকে আরো স্পেসিফিক্যালি সিলেক্ট করতে হয় স্টাইল করার জন্য যা আমি এই আর্টিকেল এ ক্লিয়ার করার চেস্টা করবো। এটা ব্রেইন টিউনারস আর আমার বাংলা ব্লগে একযোগে পাবলিশ করা হল । চলুন শুরু করি।
* সিলেক্টরঃ
এভাবে যে স্টাইল এপ্লাই করা হয় তা ওয়াইল্ড কার্ড এর মত সবগুলা ইলেমেন্ট এই পড়বে।
*{
margin:0;
padding:0;
}
এর ফলে সকল সিলেক্টরের মারজিন আর প্যাডিং জিরো হয়ে যাবে। ইচ্ছে মত পরিবর্তন সম্ভব । এ দুটা বেশী ব্যবহার করা হয় বলে দেখানো হল।
id selector (#id):
এই সিলেক্টর দিয়ে এক পেজ এ একটি মাত্র ইউনিক সিলেক্টর সিলেক্ট করা যাবে।
#first-item{
color:red;
}
এর ফলে যে ট্যাগের আইডি #first-name হবে সেটি সিলেক্টেড হবে।
class selectior (.class):
এই সিলেক্টর দিয়ে এক পেজ একাধিক একই নামের সকল সিলেক্টর সিলেক্ট করা যাবে। Tag selector কে নরমালি element বলে। সো কনফিউজড হবেন না আশা করি।
.box{
background-color:#f2e;
}
এর ফলে .box নামের সব সিলেক্টর সিলেক্ট হয়ে যাবে।
element:
ব্যবহার করা হয় সব সিমিলার ট্যাগে একই স্টাইল প্রদান করার জন্য। এক্ষেত্রে শুধুই ট্যাগ এর নাম আমরা লেখে দেই। যেমনঃ
p{
color:#000;
}
এতে যা হবে সব p Tag element এই এই স্টাইল বসবে।
element, element:
আমরা একই স্টাইল কমা দিয়ে দিয়ে একের অধিক ট্যাগেও এপ্লাই করতে পারি। যেমনঃ
p,h1{
color:#fff;
background-color:#000;
}
এতে যা হবে তা হল সকল p and h1 ট্যাগ উপরের স্টাইল দেওয়ার জন্য সিলেক্টেড হবে।
element element:
আমরা এইভাবে যদি সিলেক্টর ডিফাইন করি তাহলে একটা সিলেকটরের ভিতরের সিলেক্টর সিলেক্ট হবে।
div p{
font-size:18px;
}
এর ফলে একটা div ট্যাগের ভিতরের সকল p Tag এ এই সিলেকশন কাজ করবে।
element+ element:
এর ফলে যা হয় প্রথম ইলিমেন্ট এর ঠিক পরপরই পরবর্তী ইলিমেন্ট থাকলে তা সিলেক্ট হবে এবং সেই স্টাইল এপ্লাই হবে।
h1+p{
color: yellow;
}
এর ফলে h1 এর ঠিক পরের প ট্যাগে এই স্টাইল বসবে
element > element:
এভাবে যদি লেখা হয় তাহলে একটা প্যারেন্ট ইলিমেন্ট এর ভিতরের সকল সেইম ইলিমেন্ট সিলেক্ট করে।
div>p{
color:blue;
}
div এর ভিতরের সব p যে কটাই থাক না কেন একই স্টাইল দিবে।
element1 ~ element 2:
সকল element2 কে সিলেক্ট করবে যাদের আগে element 1 আছে। যেমন
p~ul{
list-style:none;
}
এর ফলে সকল ul selected হবে যার আগে p Tag আছে।
এবার কিছু এট্রিবিউট বেইজড সিলেক্টর আমরা দেখতে পারি। আসুন …
[attribute]
এর মাধ্যমে একটা স্পেসিফিক এট্রিবিউট আছে এমন ট্যাগ সিলেক্ট করা যাবে।
[target]{
}
এর ফলে সকল target আছে এমন ইলিমেন্ট সিলেক্ট হবে ।
[attribute=value]
এর মাধ্যমে একটা স্পেসিফিক এট্রিবিউট স্পেসিফিক ভ্যালুর জন্য স্টাইল সিলেক্ট করা যাবে।
[target=blank]{
}
এর ফলে সকল “_blank” ওয়ালা target attribute এর লিঙ্ক সিলেক্ট হবে।
[attribute^=value]
এর মাধ্যমে একটা স্পেসিফিক attribute আছে এমন ইলিমেন্ট সিলেক্ট হবে যার ভ্যালু একটা নিদ্দির্স্ট প্যাটার্ন ফলো করে শুরু হবে।
ধরুন আমাদের কয়েকটা আইডি আছে যা col-1, col-2, col-3 এমন । এখানে দেখা যাচ্ছে এরা শুরু হল সবাই col- দিয়ে। শুধু তাদের নাম্বারগুলা ভিন্ন । এখন একই স্টাইল দিতে গেলে সবগুলার জন্য আলাদা স্টাইল লেখা লাগতো। Thanks to attribute styling, আমরা এদের নিচের মত করেই লিখতে পারবো।
[id^=col-]
{
background-color:yellow;
}
WordPress ডেভেলপার মাত্রই বুঝবেন এর প্রয়োজনীয়তা কতটুকু!
[attribute$=value]
এটা উপরেরটার বিপরীত। এর মাধ্যমে একটা স্পেসিফিক attribute আছে এমন ইলিমেন্ট সিলেক্ট হবে যার ভ্যালু একটা নিদ্দির্স্ট প্যাটার্ন ফলো করে শেষ হয়। ।
ধরুন আমাদের কয়েকটা আইডি আছে যা miz-col, fiz-col, gizgiz-col এমন । এখানে দেখা যাচ্ছে এরা শুরু হল সবাই col- দিয়ে। শুধু তাদের নাম্বারগুলা ভিন্ন । এখন একই স্টাইল দিতে গেলে সবগুলার জন্য আলাদা স্টাইল লেখা লাগতো। Thanks to attribute styling, আমরা এদের নিচের মত করেই লিখতে পারবো।
[id$=-col]{
color:blue;
}
[attribute~=value]
এটার ফলে একটা বিশেষ শব্দ আছে এমন সব attribute সিলেক্ট হবে। যেমনঃ
[title~=download]
{
}
এর ফলে যে যে ট্যাগের কোন title এট্রিবিউট এ download কথাটি থাকবে সেটি সিলেক্ট হবে।
[attribute|=value]
এটাও অনেকটা [attribute^=value] এর মত। এর ব্যবহারের ফলে যে attribute এর ভ্যালুর শুরুতেই প্যাটার্ন থাকবে তাকে সিলেক্ট করা হবে।
[lang|=bn] {
background-color: green;
}
এর ফলে সকল ইলিমেন্ট ( ট্যাগ) যার lang attribute bn দিয়ে শুরু হয় তাকে সিলেক্ট করবে।
[attribute*=value]
এই attribute selector এর ভ্যালু একটা সাবস্ট্রিং। অর্থাৎ এই লেখা যদি কোন সিলেক্টরের মধ্যে কোথাও না কোথাও পাওয়া যাইয় , তখনই এটা কাজ করবে।
<!DOCTYPE html>
<html>
<head>
<style>
[class*="miz"] {
background: green;
}
</style>
</head>
<body>
<h1 class="first_miz">First element with a miz in it.</h1>
<h1 class="second">Second element of this block.</h1>
<h1 class="bossmiz">Third element with a miz in it</h1>
<p class="miz_box">Fourth element with a miz in it</p>
</body>
</html>
এই উদাহরণ রান করলে দেখা যাবে যে সকল miz আছে এমন element এর স্টাইলে ব্যাকগ্রাউন্ড সবুজ হয়ে গেছে !
উল্লেখ্য , আমরা চাইলে ভ্যালুতে ডাবল কোট দিয়েও লিখতে পারি আবার ডাবল কোট দেওয়া ছাড়াও লিখতে পারি।
আজ এ পর্যন্তই। আর বাকি থাকে psuedo selector গুলা যা এই আর্টিকেলেই আবার যুক্ত করে দিব।
এরপর দেখাবো কিভাবে বিভিন্ন রকম সিলেক্টর আর মিক্স করে আমরা কোন কাঙ্ক্ষিত স্টাইল পেতে পারি!
এটা একটা রেফারেন্স হিসাবে আপনারা ব্যবহার করতে পারবেন। তাই বুকমার্ক করে রাখুন। উপকৃত হলে কমেন্ট করে জানাবেন। কোন ভুল পেলেও জানাবেন । আমি শুধরে নিব। ধন্যবাদ।
আর হ্যা কপিবাজরা কপি করবেন ঠিক আছে ভায়া, একটু ক্রেডিট দিয়েন। রবের কাছে নাইলে বিচার দিব কিন্তু 😉