CSS নির্দিষ্টতা ক্যালকুলেটর

CSS নির্দিষ্টতা কী?#

যখন দুটি CSS নিয়ম একই এলিমেন্টে একই প্রপার্টি সেট করার চেষ্টা করে, ব্রাউজার শেষে লেখা নিয়মটিকে বেছে নেয় না — এটি বেছে নেয় যার নির্দিষ্টতা বেশি। নির্দিষ্টতা হলো একটি তিন-অংশের স্কোর (A, B, C) যা ক্যাসকেড একটি সংস্করণ নম্বরের মতো তুলনা করে:

• A — ID নির্বাচক (#header)।
• B — ক্লাস নির্বাচক (.btn), অ্যাট্রিবিউট নির্বাচক ([type=email]), এবং ছদ্ম-ক্লাস (:hover, :focus)।
• C — টাইপ নির্বাচক (div, a) এবং ছদ্ম-এলিমেন্ট (::before, ::first-line)।

A প্রথমে তুলনা করা হয়; একটি টাই B-তে চলে যায়, তারপর C। একটি ID (1,0,0) যেকোনো সংখ্যক ক্লাসের (0,99,99) চেয়ে জিতে যায়, যা পরবর্তীতে যেকোনো সংখ্যক টাইপের চেয়ে জিতে যায়। সর্বজনীন *, কম্বিনেটর (> + ~), এবং নেস্টিং নির্বাচক & কিছুই যোগ করে না।

এই পৃষ্ঠাটি আপনার পেস্ট করা যেকোনো নির্বাচকের জন্য সেই টাপল গণনা করে — আধুনিক ফাংশনাল ছদ্ম-ক্লাস :is(), :where(), :not(), :has() এবং :nth-child()-এর of S ক্লজ সহ — নির্বাচকগুলোর একটি তালিকা র‍্যাঙ্ক করে, এবং ঠিক কোন টুকরোগুলো কী অবদান রেখেছে তা দেখায়। এটি সার্বজনীন CSS প্রশ্নের উত্তর দেওয়ার সবচেয়ে দ্রুত উপায়: “কেন আমার নিয়ম হেরে যাচ্ছে?”

যেভাবে ব্যবহার করবেন#

1. একটি কার্যকর নির্বাচক সেট লোড করতে নমুনা ক্লিক করুন, বা বাক্সটি মুছে নিজের পেস্ট করুন। আপনি একটি খালি নির্বাচক (#nav .item) বা একটি সম্পূর্ণ নিয়ম (#nav .item { color: red }) লিখতে পারেন; টুলটি {-এর আগের অংশটি পড়ে।
2. একাধিক নির্বাচক? সেগুলোকে কমা দিয়ে আলাদা করুন — সেগুলোকে সবচেয়ে নির্দিষ্ট থেকে সবচেয়ে কম নির্দিষ্টে র‍্যাঙ্ক করা হয়, এবং বিজয়ী চিহ্নিত করা হয়।
3. ডান প্যানটি প্রতিটি নির্বাচককে তার (A, B, C) টাপল এবং প্রতিটি অবদানকারী টুকরোর একটি রঙিন ব্রেকডাউন সহ তালিকাভুক্ত করে (লাল = ID, নীল = ক্লাস/অ্যাট্রিবিউট/ছদ্ম-ক্লাস, সবুজ = টাইপ/ছদ্ম-এলিমেন্ট), যাতে আপনি দেখতে পারেন কেন স্কোরটি যা আছে।
4. উপরের ডানদিকের রঙিন লিজেন্ডটি আপনাকে মনে করিয়ে দেয় কোন বিন্দু A / B / C-তে ম্যাপ করে।
5. আপনার নিয়মে যদি !important থাকে, একটি তথ্যমূলক নোট আবির্ভূত হয় — !important হলো একটি ঘোষণা-স্তরের ওভাররাইড যা নির্দিষ্টতা তুলনার উপরে বসে, ভেতরে নয়।

প্রধান বৈশিষ্ট্য#

• কঠিন ক্ষেত্রে সঠিক। :where() সর্বদা (0,0,0) অবদান রাখে; :is() / :not() / :has() তাদের আর্গুমেন্টের মধ্যে সর্বোচ্চ নির্দিষ্টতা নেয়; লিগেসি :before এবং :nth-child()-এর of S ক্লজ Selectors Level 4 অনুযায়ী হ্যান্ডেল করা হয়।
• একটি কমা-বিভাজিত তালিকা র‍্যাঙ্ক করে এবং টাই চিহ্নিত করে, যাতে আপনি এক নজরে দেখতে পারেন কয়েকটি নিয়মের মধ্যে কোনটি জিতবে।
• প্রতি-টুকরো ব্রেকডাউন। প্রতিটি #id, .class, [attr], :pseudo-class, ::pseudo-element, এবং টাইপ আইটেমাইজ করা হয় সঠিক টেক্সট সহ যা এটি অবদান রেখেছে।
• সম্পূর্ণ নিয়মে সহনশীল। a:hover { text-decoration: underline } পেস্ট করুন — মন্তব্যগুলো সরানো হয় এবং ঘোষণা ব্লকটি স্বয়ংক্রিয়ভাবে উপেক্ষিত হয়।
• ১০০% স্থানীয়। কিছুই পৃষ্ঠা ছাড়ে না; কোনো স্টাইলশিট আনা বা মূল্যায়ন করা হয় না।

বিস্তারিত উদাহরণ#

একটি সাধারণ ডিবাগিং ধাঁধা: তিনটি নিয়ম একই লিঙ্ককে লক্ষ্য করে, এবং ভুল রঙ জিতে যায়। সেগুলোকে বাক্সে পেস্ট করুন:

.button:hover
:is(.card, #hero) .button
a.button

আউটপুট সেগুলোকে র‍্যাঙ্ক করে:

বিজয়ী সবচেয়ে বেশি ক্লাসের সাথে নয়। :is(.card, #hero) তার আর্গুমেন্টের মধ্যে সর্বোচ্চ নির্দিষ্টতা উত্তরাধিকার পায় — #hero একটি ID, তাই :is() (1,0,0) বহন করে যদিও .card শুধুমাত্র (0,1,0)। .button যোগ করলে B এক বাড়ে, (1,1,0) দেয়। কলাম A-এর সেই একক ID টি .button:hover-এর দুটি ক্লাসের (0,2,0) চেয়ে জিতে যায় — যা সেই সঠিক আশ্চর্য যা :is()-কে উৎপাদন CSS-এ বিপজ্জনক করে তোলে।

আপনার যদি নির্দিষ্টতা না বাড়িয়ে একই গ্রুপিং প্রয়োজন হয়, আপনি :is()-কে :where()-এ অদলবদল করবেন:

:where(.card, #hero) .button   →   (0, 1, 0)

এখন এটি a.button-এর সাথে টাই করে টাইপ বাদে, এবং সোর্স ক্রম সিদ্ধান্ত নেয়। এটিই :where()-এর অস্তিত্বের পুরো কারণ।

সাধারণ জিজ্ঞাসা#

কেন একটি ID শত শত ক্লাসকে হারায়?#

নির্দিষ্টতা কলামগুলোকে বাম থেকে ডানে একটি সংস্করণ নম্বরের মতো তুলনা করে, একটি যোগফল হিসেবে নয়। (1,0,0) (0,999,999)-এর “এগিয়ে” কারণ কলাম A প্রথমটিতে অশূন্য এবং দ্বিতীয়টিতে শূন্য; কলাম B এবং C কখনোই পরামর্শ করা হয় না। এটি ইচ্ছাকৃত — ID-গুলোকে অস্পষ্টহীন একক হিসেবে ডিজাইন করা হয়েছিল।

:is() এবং :where()-এর মধ্যে পার্থক্য কী?#

তারা যা মেলায় তাতে অভিন্থ, কিন্তু নির্দিষ্টতায় বিপরীত। :is(.a, #b) তার আর্গুমেন্টের মধ্যে সর্বোচ্চ নির্দিষ্টতা নেয় (তাই #b এটিকে (1,0,0) করে); :where(.a, #b) সর্বদা তার আর্গুমেন্ট নির্বিশেষে (0,0,0) অবদান রাখে। :where() ব্যবহার করুন কম-নির্দিষ্টতার ডিফল্টের জন্য যা আপনি সহজেই ওভাররাইড করতে পারেন, এবং :is() যখন আপনি সত্যিই চান সম্মিলিত নির্বাচক প্রতিযোগিতা করুক।

একটি ইনলাইন style="…" অ্যাট্রিবিউট কি এগুলোকে হারায়?#

হ্যাঁ। ইনলাইন স্টাইলগুলো সাধারণ ক্যাসকেডে যেকোনো নির্বাচক-ভিত্তিক নিয়মের চেয়ে উচ্চতর (তারা একটি উচ্চতর উৎসে বসে), তাই !important ছাড়া কোনো নির্বাচক টাপল একটি ইনলাইন স্টাইলকে ওভাররাইড করবে না। এটি (A,B,C) স্কোর থেকে একটি পৃথক অক্ষ, যা কারণে টুলটি শুধুমাত্র নির্বাচক মূল্যায়ন করে।

!important কোথাযে ফিট করে?#

!important একটি ঘোষণা-স্তরের পতাকা, একটি নির্বাচক প্রপার্টি নয় — এটি (A,B,C) টাপল পরিবর্তন করে না। এটি সম্পূর্ণ ঘোষণাকে একটি উচ্চতর ক্যাসকেড উৎসে নিয়ে যায়, তাই একটি !important নিয়ম নির্দিষ্টতা নির্বিশেষে একটি সাধারণ নিয়মকে হারায়। টুলটি তার উপস্থিতি তথ্যমূলকভাবে নোট করে কিন্তু এটিকে স্কোরের বাইরে রাখে।