সিএসএস স্পেসিফিসিটি (CSS Specificity) কনসেপ্টটি শুধু জিহ্বা বাঁকানো (tongue twister) নয় (এটা তিনবার দ্রুত বলতে চেষ্টা করুন!), বরং এটি একটু মস্তিষ্ক বাঁকানো (mind bender) ও হতে পারে! এটি সিএসএস-এ বোঝার সবচেয়ে কঠিন কনসেপ্টের একটি। এই আর্টিকেলে, আমরা কভার করব specificity বলতে কী বুঝায়, কীভাবে এটি ক্যালকুলেট (calculate) হয়, এবং সিলেক্টরদের র্যাঙ্কিং (ranking) কীভাবে পেজে রেন্ডার হওয়া স্টাইলকে নির্ধারণ করে। চিন্তা করবেন না! আপনি খুব দ্রুত স্পেসিফিসিটি এক্সপার্ট হয়ে যাবেন।
'specificity' বলতে কী বুঝায়?
সিএসএস স্পেসিফিসিটি মূলত রেফার করে একটি সিলেক্টর কতটা গুরুত্বপূর্ণ। প্রতিটি সিলেক্টর একটি স্পেসিফিসিটি পায় এর টাইপের উপর নির্ভর করে। সিলেক্টরের নম্বর যত বেশি, সেটা তত বেশি স্পেসিফিক (specific) এবং তত বেশি চান্স যে সেটার সিএসএস ব্লকটি স্টাইলিং যুদ্ধে জিতবে।
স্পেসিফিসিটি প্রতিফলিত হয় চারটি নম্বরের মাধ্যমে, প্রতিটি কমা (comma) দিয়ে সেপারেটেড:
Selector specificity = 0, 0, 0, 0
যখন আমরা স্পেসিফিসিটিকে চারটি নম্বরের স্ট্রিং হিসেবে দেখি কমা ছাড়া (যেমন 0000, 0101, 1001, ইত্যাদি), উচ্চ নম্বরটি আরও বেশি স্পেসিফিক।
সিলেক্টরদের স্পেসিফিসিটি র্যাঙ্কিং (কম – বেশি):
চলুন র্যাঙ্ক অনুযায়ী বিভিন্ন টাইপের এলিমেন্টগুলো দেখি:
- ✱ (Universal Selector)
ইউনিভার্সেল সিলেক্টর (The universal selector)। এর স্পেসিফিসিটি 0, 0, 0, 0। সাধারণত আপনি স্টাইলশিটের (stylesheets) শীর্ষে এগুলো দেখবেন। এটি গুরুত্বের দৃষ্টিতে সবচেয়ে নিচে র্যাঙ্ক করে। প্রায় যেকোনো কিছু এটাকে ওভাররাইড (override) করবে বা ইউনিভার্সেল সিলেক্টর সিএসএস-এ যোগ করবে।
- +, ~, >, ' ', ~ (Combinators)
কম্বিনেটরস (combinators), সাধারণত টাইপ সিলেক্টর বা ক্লাস সিলেক্টরের চাইল্ডের সিবলিং (sibling) সিলেক্ট করার সময় দেখা যায়, স্পেসিফিসিটির ওপর কোনো প্রভাব ফেলে না এবং ওভারঅল নম্বরের দিকে কাউন্ট (count) হয় না। নেগেশন সিউডো ক্লাস (:not) ও এই স্পেসিফিসিটি ক্যাটেগরিতে পড়ে।
- div, form, ul, li, etc. (Type Selectors)
এইগুলো টাইপ সিলেক্টর (type selectors)। এই সিলেক্টরগুলো প্রায় সব কিছু অন্তর্ভুক্ত করে যা আপনার HTML-এ ট্যাগ (tag) বলা যেতে পারে। এর স্পেসিফিসিটি ওয়েইট (weight) 0, 0, 0, 1। যদি আপনার একাধিক টাইপ সিলেক্টর থাকে কম্বিনেটর দিয়ে সেপারেটেড, তবে আপনি সিলেক্টরগুলো যোগ করবেন:
div li {} ⇐ specificity is 0,0,0,2 div li p {} ⇐ specificity is 0,0,0,3
- .main-container, .navbar, [type="text"], :hover (Class, Attribute, Pseudo-class Selectors)
স্পেসিফিসিটির জন্য পরের sırada থাকে ক্লাস (class), অ্যাট্রিবিউট (attribute) এবং সিউডো-ক্লাস (pseudo-class) সিলেক্টর।
ক্লাস সিলেক্টর ইন্ডিকেট করা হয় ডট (".") দিয়ে শুরুতে। অ্যাট্রিবিউট সিলেক্টরের স্কোয়ার ব্র্যাকেটে অ্যাট্রিবিউট থাকে এর টাইপ সিলেক্টরের পাশে। সিউডো-ক্লাস সিলেক্টর সংরক্ষিত থাকে সেই স্পেশাল এলিমেন্টের জন্য যাদের আরও স্পেসিফিক স্টাইলিং লাগে। এদের স্পেসিফিসিটি 0, 0, 1, 0।
div.navlink a {}
– স্পেসিফিসিটি 0, 0, 1, 1 কারণ আমাদের একটি ক্লাস সিলেক্টর এবং একটি টাইপ সিলেক্টর রয়েছে।
div.header li.list-item-disc button[type="submit"] {}
– স্পেসিফিসিটি 0, 0, 3, 3 কারণ আমাদের ৩টি টাইপ সিলেক্টর এবং ২টি ক্লাস সিলেক্টর + ১টি অ্যাট্রিবিউট সিলেক্টর রয়েছে। যদি আমরা অ্যাট্রিবিউট সিলেক্টরটা বাদ দিই, স্পেসিফিসিটি হত 0, 0, 2, 3। কারণ ২৩, ৩৩ থেকে ছোট, স্পেসিফিসিটি রুল অনুযায়ী ০, ০, ৩, ৩ স্পেসিফিসিটিটা জিতবে কারণ এর উচ্চতর স্পেসিফিসিটি রয়েছে।
- #blue, #hidden, etc. (ID Selectors)
ID সিলেক্টরগুলোর সিএসএস সিলেক্টরের মধ্যে সর্বোচ্চ স্পেসিফিসিটি রয়েছে: 1, 0, 0, 0। ID অ্যাট্রিবিউট ডেফিনিশন (attribute definition) এর ইউনিক (unique) প্রকৃতির কারণে, আমরা সাধারণত একটি খুব স্পেসিফিক এলিমেন্ট স্টাইল করি যখন আমরা সিএসএস-এ ID কল করি।
div#orange {}
– স্পেসিফিসিটি 1, 0, 0, 1 কারণ আমাদের একটি টাইপ সিলেক্টর এবং একটি ID সিলেক্টর রয়েছে। নিচের কোন স্টাইল স্পেসিফিসিটি রুল অনুযায়ী জিতবে?
div#orange { background-color: orange; } div.square { background-color: green; width: 150px; height: 150px; }
- প্রথম div-এ একটি টাইপ সিলেক্টর এবং একটি ID সিলেক্টর রয়েছে, যা এর ওভারঅল স্পেসিফিসিটি করে 1, 0, 0, 1।
- দ্বিতীয় div-এ একটি টাইপ সিলেক্টর এবং একটি ক্লাস সিলেক্টর রয়েছে, যা এর ওভারঅল স্পেসিফিসিটি করে 0, 0, 1, 1।
যেহেতু 1001, 11 থেকে বড়, প্রথম div জিতবে এবং background-color হবে orange, সিএসএস-এর ক্যাস্কেডিং (cascading) প্রকৃতির বিপরীতে।
- Inline-style
ইনলাইন-স্টাইলিং (inline-styling) এই সবর মধ্যে কীভাবে ফিট হয়? এটি ID সিলেক্টর থেকেও আরও বেশি স্পেসিফিক। একটি ইনলাইন-স্টাইল আপনার সিএসএস ফাইলের প্রায় সব কিছু ট্রাম্প (trump) করবে। স্পেসিফিসিটির দৃষ্টিতে এটি হাইএস্ট (highest) ওয়েইটেড।
!importantরুল (rule)
!important কীওয়ার্ড সবকিছু ট্রাম্প করে। এটি সবচেয়ে বেশি স্পেসিফিক এবং সিএসএস দিয়ে সেট করা যেকোনো পূর্বের রুল ওভাররাইট (overwrite) করবে।
অনুশীলন (Practice)
নিচের কোড এডিটরে, আমি কিছু র্যান্ডম ক্লাস নাম এবং ID নাম সহ কন্টেইনারের একটি পেজ তৈরি করলাম। আমি চাই আপনি একটু সময় নিন এবং আপনার সিএসএস স্কিল ব্যবহার করে নির্দিষ্ট এলিমেন্টগুলোর রঙ পরিবর্তন করুন অন্য সব ডিভগুলো একই রঙ রাখতে। আপনি সেসি রুলগুলো কীভাবে লিখবেন? সর্বোচ্চ স্পেসিফিসিটি পাওয়ার জন্য আপনি কী ব্যবহার করবেন যদি নির্দিষ্ট এলিমেন্ট টার্গেট করার জন্য সেটা লাগে।
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CSS Specificity</title> <style> body { width: 100%; max-width: 800px; margin: 0 auto; } main { width: 100%; height: 800px; display: flex; flex-wrap: wrap; flex-direction: column; } div { text-align: center; } *.square { /* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis? */ height: 150px; width: 150px; background-color: black; color: white; margin: 20px; } div.flex { /* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen? Does this override the div selector? Why? How does its specificity compare to the div selector's specificity? */ display: flex; justify-content: center; align-items: center; } div#red { /* why does this one win out? What is the specificity of this div? */ background-color: darkred; } #red { /* What would happen if we took the 'div' out of the previous selector? Which one wins? */ background-color: red; } main > div { font-size: 55px; font-weight: bold; } div#self-align { /* What happens here? */ align-self: center; } </style> </head> <body> <main> <div id="self-align" class="square flex">1</div> <div class="square flex">2</div> <div class="square flex">3</div> <div class="square flex">4</div> <div class="square flex">5</div> <div id="red" class="square flex">6</div> <div class="square flex">7</div> <div class="square flex">8</div> <div class="square flex">9</div> <div class="square flex">10</div> <div class="square flex">11</div> <div class="square flex">12</div> </main> </body> </html>
উপসংহার
এই আর্টিকেলে আমরা সিএসএস স্পেসিফিসিটি (CSS Specificity) নিয়ে আলোচনা করেছি – সপষ্টভাবে কোন সিলেক্টররা অন्यों চেয়ে বেশি স্পেসিফিক এবং কীভাবে আমরা একচুই স্পেসিফিসিটি নম্বর বের করি। প্রথম পড়ায় যদি একদম বুঝতে পারেন না তাও হতাশ হবেন না। এটি অনেক তথ্য পচাতে হয়। ধৈর্য ধরুন, আপনি শীঘ্রই এটা শিখে যাবেন!
