CSS Specificity
নামটা কঠিন হতে পারে, তবে জিনিসটা এতো কঠিন না। CSS শেখার শুরুতেই যদি এটা সম্পর্কে কিছুটা ধারণা থাকে তবে অনেক পেরেশানি থেকে রেহাই পেতে পারেন।
অনেক সময় দেখা যায়, আমরা style দিচ্ছি ঠিকঠাক কিন্তু অজানা কোনো শক্তির বলে সেই স্টাইল ঠিকভাবে কাজ করে না বা অপ্রত্যাশিত ফলাফল দেখায়। এই অজানা শক্তিটা আসলে কি? আবার, আমাদের অনেকের ধারণা stylesheet এ যে style টা শেষে থাকে সেই style টাই element এ apply হয়। আসলেই কি তাই?
চলুন, বিস্তারিত জানি।
স্পেসিফিসিটি কি?
যখন আমরা একই এলিমেন্টে একাধিক style দিই তখন মূলত CSS style গুলো কনফ্লিক্ট করে বা সাংঘর্ষিক হয়ে যায়। তখন ওই এলিমেন্টে কোন style টা অগ্রাধিকার পাবে তা নির্ধারণ করার যে নিয়ম রয়েছে, সেই নিয়মটাকেই বলা হচেছ CSS Specificity।
ধরুন, আমরা h1 এলিমেন্টে একই stylesheet এ দুই জায়গায় style দিলাম। শুরুতে দিলাম, background: red; পরে দিলাম background: blue;। যেকোনো একটাই তো apply হবে, তাই না? এই apply হওয়া style টি মূলত CSS Specificity এর মাধ্যমে নির্ধারণ হয়।
এটি অনেকটা স্কোরিং সিস্টেমের মতো কাজ করে, যেখানে বিভিন্ন CSS সিলেক্টরের স্কোর অনুযায়ী weight বা পাওয়ার নির্ধারণ করা হয়। যার পাওয়ার বেশি হবে তার রাজত্বই চলবে। অর্থাৎ সেই style ই apply হবে।
স্পেসিফিসিটির হিসাব-নিকাশ
চলুন, CSS সিলেক্টর গুলোর স্কোর নিয়ে একটু আলোচনা করি। নিচে স্পেসিফিসিটির মান অনুযায়ী সিলেক্টরগুলোর স্কোর এবং উদাহরণসহ একটা তালিকা দেওয়া হলোঃ
- Inline Styles: এটি সবচেয়ে বেশি অগ্রাধিকার পায়। স্কোর: 100
উদাহরণ:<div style="color: red;"> - ID Selectors: প্রতিটি আইডি সিলেক্টরের জন্য স্কোর 100।
উদাহরণ:#header - Class, Attribute, and Pseudo-class Selectors: প্রতিটির জন্য স্কোর 10।
উদাহরণ:.button,[type="text"],:hover - Element and Pseudo-element Selectors: প্রতিটির জন্য স্কোর 1।
উদাহরণ:div,::before
আমরা যদি অগ্রাধিকারের ভিত্তিতে সাজাই-
সবচেয়ে বেশি অগ্রাধিকার পাবে Inline Style তারপরে Id Selector এরপর Class, Attribute, Pseudo-class selector এবং সবচেয়ে কম অগ্রাধিকার পাবে Element, Pseudo class selector।
এবার কিছু উদাহরণ দেখি আর স্কোর গণনা করি।
একটা কোড example দেখি:
<div class='section'>
<h1 class="section-heading">Lorem Ipsum</h1>
</div>
একই stylesheet এ যদি h1 এলিমেন্টকে দুই জায়গায় style দিই-
.section h1.section-heading {
background: red;
}
.section h1 {
background: blue;
}
দেখুন, প্রথম style এ দুইটা ক্লাস সিলেক্টর ( .section, .section-heading) আছে এবং একটা Element সিলেক্টর আছে। তাহলে এদের স্কোর হবে- 10 + 1 + 10 = 21।
দ্বিতীয় style এর স্কোর হবে- 10 + 1 = 11।
এই ক্ষেত্রে, প্রথম style এর সিলেক্টরের স্কোর বেশি হওয়ায় এই স্টাইলটি অগ্রাধিকার পাবে এবং background red হবে।
আশা করি, বুঝাতে পেরেছি।
চলুন আরেকটা রিয়েল লাইফ example দেখি।
ধরুন আপনি একটি মেনু তৈরি করছেন:
<nav id="navbar" class="navigation">
<ul>
<li class="menu-item">
<a class="menu-link" href="#">Home</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">About</a>
</li>
</ul>
</nav>
ধরুন, stylesheet এর বিভিন্ন জায়গায় a এলিমেন্টকে একাধিক style দিয়েছেন।
/* Element Selector
Score: 1
*/
a {
color: black;
}
/* Id + Class + Element Selector
Score: 100 + 10 + 1 = 111
*/
#navbar .menu-item a {
color: green;
}
/* Class + Class + Element + Class Selector
Score: 10 + 10 + 1 + 10 = 31
*/
.navigation .menu-item a.menu-link {
color: blue;
}
এই কোডের color: blue স্টাইলটি পরে দেওয়া হয়েছে এবং এর সিলেক্টরও বেশি। কিন্তু এরপরও এই স্টাইল apply হবে না। কারণ এটার স্ফেসিফিসিটি স্কোর মাত্র 31।
অপরদিকে, color: green দেয়া স্টাইল এর স্ফেসিফিসিটি স্কোর 111। স্কোর বেশি হওয়ার কারণে এই স্টাইলটাই অগ্রাধিকার পাবে।
আশা করি, বুঝাতে পেরেছি। ধন্যবাদ সবাইকে।
কিছু বিষয় মাথায় রাখি:
- CSS ফাইলে যে লেখাটি শেষে থাকে সেই লেখার স্টাইলটি অগ্রাধিকার পাবে, এই ধারণাটা সঠিক নয়। অগ্রাধিকার নির্ভর করবে স্টাইলের স্পেসিফিসিটি স্কোর এর উপর।
- তবে হ্যা, স্কোর যদি একই হয় তবে শেষে যে স্টাইল থাকবে সেটাই অগ্রাধিকার বেশি পাবে।
- ইনলাইন স্টাইল স্পেসিফিসিটি বাড়িয়ে দেয় ঠিক কিন্তু পরবর্তীতে স্টাইল ম্যানেজ করা কঠিন হয়ে যায়।
!importantস্পেসিফিসিটি স্কোরকে ওভাররাইড করে। এটি ব্যবহার করলে, স্পেসিফিসিটির স্কোরের তোয়াক্কা না করে এই স্টাইলটাকেই প্রাধান্য দেয়া হয়। কিন্তু এটা ব্যবহার না করাটাই মঙ্গলজনক।
