একটি সিলেক্টর পেস্ট করুন আর দেখুন ঠিক কোন অংশগুলো গণনায় ধরা হচ্ছে, স্তর অনুযায়ী রং-কোডেড — অথবা দুটো সিলেক্টর তুলনা করে দেখুন আসলে কোনটা জেতে।
স্পেসিফিসিটি পাঠটি পড়ুনপুরো একটি রুল পেস্ট করলেও (selector { … }) { থেকে যা কিছু আছে স্বয়ংক্রিয়ভাবে বাদ যাবে।
header .nav > ul li.active a:hover::afterস্পেসিফিসিটি কখনো যোগ করে একটি সংখ্যায় পরিণত হয় না — (0, 5, 0) সবসময় (0, 0, 100)-কে হারায়। প্রথম সংখ্যাটি তুলনা করুন; সমান হলে দ্বিতীয়টি; সেটাও সমান হলে তবেই তৃতীয় সংখ্যাটি গুরুত্বপূর্ণ হয়।
:not(), :is(), :has()
এগুলো নিজের কোনো ওজন যোগ করে না — পুরো সিউডো-ক্লাসটি তার সবচেয়ে specific আর্গুমেন্টের স্পেসিফিসিটি দিয়ে প্রতিস্থাপিত হয়। :is(#a, .b) ঠিক #a-এর মতোই স্কোর করে; .b শাখাটি স্কোরিংয়ের জন্য সম্পূর্ণ উপেক্ষিত হয়।
:where()
সবসময় শূন্য অবদান রাখে, ভিতরে ID থাকলেও — :where(#a)-এর স্কোর (0, 0, 0)। এটি বিশেষভাবে এমন সিলেক্টর লেখার জন্য তৈরি যা কখনো cascade-এর সাথে লড়াই করে না।
কম্বিনেটর
Descendant ( ), child (>), sibling (+, ~) কম্বিনেটর আর universal সিলেক্টর (*) নিজে থেকে কিছুই যোগ করে না — শুধু এদের দুই পাশের সাধারণ সিলেক্টরগুলোই গণনায় ধরা হয়।
স্পেসিফিসিটির সম্পূর্ণ বাইরে
একটি ইনলাইন style="…" অ্যাট্রিবিউট আর !important দুটোই স্পেসিফিসিটিকে বেশি স্কোর করে হারায় না, সম্পূর্ণ override করে — !important চিহ্নিত একটি এক-ক্লাসের রুল পাতার যেকোনো আন-মার্কড ID সিলেক্টরকে হারিয়ে দেয়, তার (a, b, c) যত বেশিই হোক না কেন।