CSS একটি নাম্বারিক স্কেল ব্যবহার করে সিলেক্টরের "শক্তি" বা Specificity নির্ণয় করে। যেটির Specificity সংখ্যা বেশি, সেটিই সেই HTML এলিমেন্টের ফাইনাল স্টাইল নির্ধারণ করবে—অন্য দুর্বল সিলেক্টরগুলোকে উপেক্ষা করে।
৩টি সাধারণ সিলেক্টর এবং তাদের স্পেসিফিসিটি
- Type selector:
button { ... } - Class selector:
.button { ... } - ID selector:
#button { ... }
প্রতিটি সিলেক্টরের বেসিক ভ্যালু ১। কিন্তু হায়ারার্কি আছে:
- ID (> Class > Type) — সবচেয়ে শক্তিশালী
- Class (> Type)
- Type — সবচেয়ে দুর্বল
তাই একই স্টাইলশিটে সবগুলো থাকলে #button জিতবে। ID না থাকলে .button জিতবে।
CSS Cascade (ক্যাসকেড) কী?
সব কিছুর সমান থাকলে (সেম সিলেক্টর, সেম স্পেসিফিসিটি), স্টাইলশিটে যেটি শেষে লেখা হয়েছে সেটিই জিতবে।
উদাহরণ: একই ক্লাস নাম তিনবার
.hero-button { background-color: green; }
.hero-button { background-color: blue; }
.hero-button { background-color: red; }<button class="hero-button">Button</button>ফলাফল: লাল (শেষটিই জিতল) — এটি CSS Cascade (Source Order Specificity)।
মульটিপল প্রপার্টি থাকলে?
.hero-button { background-color: green; padding: 2rem; }
.hero-button { background-color: blue; font-size: 2rem; }
.hero-button { background-color: red; }ফলাফল: বাটনে তিনটি প্রপার্টি সব মিলে যাবে—
padding: 2rem; font-size: 2rem; background-color: red;নियम: একই নামের সিলেক্টর একই প্রপার্টি টার্গেট করলে শেষটিই জিতবে। কিন্তু আলাদা প্রপার্টিগুলো স্ট্যাক (কম্বাইন) হয়ে যাবে।
বাস্তব জীবনের সমস্যা: বড়, গুলিয়ে যাওয়া CSS কোডবেস
বড় প্রজেক্টে একাধিক ডেভেলপার একই ক্লাস নাম ব্যবহার করে আলাদা প্রপার্টি যোগ করতে পারে। আপনার ক্লাসে নাও থাকা box-shadow দেখতে পেলে, সেটা অন্য কোথাও থেকে আসছে (type selector বা পুরনো ক্লাস)।
সমাধান: আপনার ক্লাসে ওভাররাইড করুন
.primary-button {
background-color: red;
padding: 1rem;
font-size: 1.125rem;
box-shadow: 0; /* existing box-shadow রিমুভ */
}টিপ: স্পেসিফিসিটি ইস্যু এড়াতে প্রায়শই ক্লাস ব্যবহার করুন, টাইপ সিলেক্টর এড়ান, ID কেবল জরুরি হলে ব্যবহার করুন, গ্রুপ সিলেক্টর এড়ান। Specificity Calculator টুল ব্যবহার করে তুলনা করুন।
