একই এলিমেন্টের দিকে নির্দেশ করা দুই বা ততোধিক পরস্পরবিরোধী CSS নিয়ম থাকলে, ব্রাউজার কিছু নিয়ম মেনে ঠিক করে কোনটি সবচেয়ে নির্দিষ্ট এবং তাই জিতবে।
স্পেসিফিসিটিকে একটি স্কোর/র্যাঙ্ক হিসেবে চিন্তা করুন, যা ঠিক করে কোন স্টাইল ঘোষণা শেষ পর্যন্ত একটি এলিমেন্টে প্রয়োগ হবে।
ইউনিভার্সাল সিলেক্টরের (*) স্পেসিফিসিটি কম, অন্যদিকে ID সিলেক্টর অত্যন্ত নির্দিষ্ট!
মনে রাখবেন: কিছু এলিমেন্টে আপনার CSS-নিয়ম প্রয়োগ না হওয়ার একটি সাধারণ কারণ হলো স্পেসিফিসিটি, যদিও আপনি ভাবেন সেগুলো প্রয়োগ হওয়া উচিত।
প্রতিটি সিলেক্টরের স্পেসিফিসিটি হায়ারার্কিতে তার নিজস্ব স্থান আছে। একটি সিলেক্টরের স্পেসিফিসিটি লেভেল নির্ধারণ করে এমন চারটি ক্যাটাগরি রয়েছে:
ইনলাইন স্টাইল - একটি ইনলাইন স্টাইল সরাসরি স্টাইল করা এলিমেন্টের সাথে যুক্ত থাকে। উদাহরণ: <h1 style="color: #ffffff;">।
ID - একটি ID হলো পেজের এলিমেন্টের জন্য একটি ইউনিক আইডেন্টিফায়ার, যেমন #navbar।
ক্লাস, অ্যাট্রিবিউট এবং সিউডো-ক্লাস - এই ক্যাটাগরিতে থাকে .class, [attribute] এবং :hover, :focus-এর মতো সিউডো-ক্লাস।
এলিমেন্ট এবং সিউডো-এলিমেন্ট - এই ক্যাটাগরিতে থাকে এলিমেন্টের নাম এবং সিউডো-এলিমেন্ট, যেমন h1, div, :before এবং :after।
স্পেসিফিসিটি কীভাবে হিসাব করতে হয় তা মুখস্থ করে নিন!
0 থেকে শুরু করুন, style অ্যাট্রিবিউটের জন্য 1000 যোগ করুন, প্রতিটি ID-এর জন্য 100 যোগ করুন, প্রতিটি attribute, class বা pseudo-class-এর জন্য 10 যোগ করুন, প্রতিটি এলিমেন্টের নাম বা pseudo-element-এর জন্য 1 যোগ করুন।
এই তিনটি কোড অংশ বিবেচনা করুন:
A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>A-এর স্পেসিফিসিটি হলো 1 (একটি এলিমেন্ট)
B-এর স্পেসিফিসিটি হলো 101 (একটি ID রেফারেন্স এবং একটি এলিমেন্ট)
C-এর স্পেসিফিসিটি হলো 1000 (ইনলাইন স্টাইলিং)
যেহেতু 1 < 101 < 1000, তৃতীয় নিয়মটির (C) স্পেসিফিসিটি লেভেল বেশি, তাই এটিই প্রয়োগ হবে।
সমান স্পেসিফিসিটি: সর্বশেষ নিয়মটিই গণ্য হয় - একই নিয়ম যদি বাইরের স্টাইল শিটে দুইবার লেখা হয়, তাহলে স্টাইল শিটে নিচের নিয়মটি স্টাইল করা এলিমেন্টের কাছাকাছি থাকে, তাই সেটিই প্রয়োগ হবে:
h1 {background-color: yellow;}
h1 {background-color: red;}পরের নিয়মটিই সবসময় প্রয়োগ হয়।
Attribute সিলেক্টরের চেয়ে ID সিলেক্টরের স্পেসিফিসিটি বেশি - নিচের তিনটি কোড লাইন দেখুন:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}প্রথম নিয়মটি বাকি দুটোর চেয়ে বেশি নির্দিষ্ট, এবং এটিই প্রয়োগ হবে।
একটি একক এলিমেন্ট সিলেক্টরের চেয়ে কনটেক্সচুয়াল সিলেক্টরের স্পেসিফিসিটি বেশি - এমবেডেড স্টাইল শিট স্টাইল করা এলিমেন্টের কাছাকাছি থাকে। তাই নিচের পরিস্থিতিতে
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {
background-color: yellow;
}
</style>পরের নিয়মটি প্রয়োগ হবে।
একটি class সিলেক্টর যেকোনো সংখ্যক element সিলেক্টরকে হারায় - .intro-এর মতো একটি class সিলেক্টর h1, p, div ইত্যাদিকে হারায়:
.intro {background-color: yellow;}
h1 {background-color: red;}ইউনিভার্সাল সিলেক্টর এবং ইনহেরিটেড মানের স্পেসিফিসিটি 0 - *, body * এবং এরকম সিলেক্টরের স্পেসিফিসিটি শূন্য। ইনহেরিটেড মানেরও স্পেসিফিসিটি 0।