বিশেষত্ব

সিএসএস পডকাস্ট - 003: নির্দিষ্টতা

ধরুন আপনি নিম্নলিখিত HTML এবং CSS এর সাথে কাজ করছেন:

<button class="branding">Hello, Specificity!</button>

button {
  color: red;
}

.branding {
  color: blue;
}

এখানে দুটি প্রতিযোগিতামূলক নিয়ম আছে। একটি বোতামটি লাল রঙ করবে এবং অন্যটি নীল রঙ করবে। কোন নিয়ম উপাদান প্রয়োগ করা হয়? নির্দিষ্টতা সম্পর্কে CSS স্পেসিফিকেশনের অ্যালগরিদম বোঝা হল প্রতিযোগী নিয়মের মধ্যে CSS কীভাবে সিদ্ধান্ত নেয় তা বোঝার চাবিকাঠি।

নির্দিষ্টতা হল ক্যাসকেডের চারটি স্বতন্ত্র পর্যায়ের একটি, যা ক্যাসকেডের শেষ মডিউলে আচ্ছাদিত ছিল।

নির্দিষ্টতা স্কোরিং

প্রতিটি নির্বাচক নিয়ম একটি স্কোরিং পায়। আপনি নির্দিষ্টতাকে মোট স্কোর হিসাবে ভাবতে পারেন এবং প্রতিটি নির্বাচকের ধরন সেই স্কোরের দিকে পয়েন্ট অর্জন করে। সর্বোচ্চ স্কোর জয়ী নির্বাচক।

একটি বাস্তব প্রজেক্টের নির্দিষ্টতার সাথে, ব্যালেন্সিং অ্যাক্ট নিশ্চিত করছে যে আপনি যে CSS নিয়মগুলি প্রয়োগ করতে চান, বাস্তবে প্রয়োগ করা হয়, সাধারণত জটিলতা রোধ করতে স্কোর কম রাখা হয়। সম্ভাব্য সর্বোচ্চ স্কোরের লক্ষ্য না করে স্কোরটি আমাদের যতটা প্রয়োজন ততটা হওয়া উচিত। ভবিষ্যতে, কিছু সত্যিকারের আরও গুরুত্বপূর্ণ CSS প্রয়োগ করার প্রয়োজন হতে পারে। আপনি যদি সর্বোচ্চ স্কোরের জন্য যান, আপনি সেই কাজটিকে কঠিন করে তুলবেন।

প্রতিটি নির্বাচক টাইপ স্কোরিং

প্রতিটি নির্বাচক টাইপ পয়েন্ট অর্জন করে। একজন নির্বাচকের সামগ্রিক নির্দিষ্টতা গণনা করতে আপনি এই সমস্ত পয়েন্ট যোগ করেন।

সর্বজনীন নির্বাচক

একটি সর্বজনীন নির্বাচক ( * ) এর কোন নির্দিষ্টতা নেই এবং 0 পয়েন্ট পায়। এর মানে হল যে 1 বা তার বেশি পয়েন্ট সহ যেকোনো নিয়ম এটিকে ওভাররাইড করবে

* {
  color: red;
}

এলিমেন্ট বা ছদ্ম-উপাদান নির্বাচক

একটি উপাদান (প্রকার) বা ছদ্ম-উপাদান নির্বাচক 1 পয়েন্ট নির্দিষ্টতা পায়।

টাইপ নির্বাচক

div {
  color: red;
}

ছদ্ম-উপাদান নির্বাচক

::selection {
  color: red;
}

ক্লাস, সিউডো-ক্লাস, বা অ্যাট্রিবিউট সিলেক্টর

একটি শ্রেণী , ছদ্ম-শ্রেণী বা বৈশিষ্ট্য নির্বাচক 10 পয়েন্ট নির্দিষ্টতা পায়।

ক্লাস নির্বাচক

.my-class {
  color: red;
}

ছদ্ম-শ্রেণী নির্বাচক

:hover {
  color: red;
}

বৈশিষ্ট্য নির্বাচক

[href='#'] {
  color: red;
}

:not() ছদ্ম-শ্রেণী নিজেই নির্দিষ্টতা গণনায় কিছুই যোগ করে না। যাইহোক, নির্বাচকরা আর্গুমেন্ট হিসাবে পাস করে নির্দিষ্টতা গণনায় যোগ করা হয়।

div:not(.my-class) {
  color: red;
}

এই নমুনাটিতে 11 পয়েন্টের সুনির্দিষ্টতা থাকবে কারণ এতে এক প্রকার নির্বাচক ( div ) এবং :not() এর ভিতরে একটি ক্লাস রয়েছে।

আইডি নির্বাচক

একটি আইডি নির্বাচক 100 পয়েন্ট নির্দিষ্টতা পায়, যতক্ষণ না আপনি একটি আইডি নির্বাচক ( #myID ) ব্যবহার করেন এবং একটি বৈশিষ্ট্য নির্বাচক ( [id="myID"] ) ব্যবহার করেন না।

#myID {
  color: red;
}

ইনলাইন শৈলী বৈশিষ্ট্য

HTML উপাদানের style বৈশিষ্ট্যে সরাসরি প্রয়োগ করা CSS, 1,000 পয়েন্টের একটি নির্দিষ্টতা স্কোর পায়। এর মানে হল যে এটিকে CSS-এ ওভাররাইড করার জন্য, আপনাকে একটি অত্যন্ত নির্দিষ্ট নির্বাচক লিখতে হবে।

<div style="color: red"></div>

!important নিয়ম

সবশেষে, একটি !important একটি CSS মানের শেষে 10,000 পয়েন্টের একটি নির্দিষ্টতা স্কোর পায়। এটি সর্বোচ্চ নির্দিষ্টতা যা একটি পৃথক আইটেম পেতে পারে।

একটি !important নিয়ম একটি CSS প্রপার্টিতে প্রয়োগ করা হয়, তাই সামগ্রিক নিয়মে (নির্বাচনকারী এবং বৈশিষ্ট্য) সবকিছু একই নির্দিষ্টতা স্কোর পায় না।

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}

আপনার উপলব্ধি পরীক্ষা করুন

নির্দিষ্টতা স্কোরিং আপনার জ্ঞান পরীক্ষা

a[href="#"] এর নির্দিষ্টতা স্কোর কি?

1

a এর মূল্য 1 পয়েন্ট, কিন্তু [href="#"] এর মূল্য 10 পয়েন্ট।

5

আবার চেষ্টা করুন!

11

a এর মূল্য 1 পয়েন্ট এবং [href="#"] এর মূল্য 10 পয়েন্ট, মোট স্কোর 11 পয়েন্ট ।

প্রসঙ্গে নির্দিষ্টতা

প্রতিটি নির্বাচকের নির্দিষ্টতা যা একটি উপাদানের সাথে মেলে তা একসাথে যোগ করা হয়। এই উদাহরণ HTML বিবেচনা করুন:

<a class="my-class another-class" href="#">A link</a>

এই লিঙ্কে দুটি ক্লাস আছে। নিম্নলিখিত CSS যোগ করুন, এবং এটি নির্দিষ্টতার 1 পয়েন্ট পায়:

a {
  color: red;
}

এই নিয়মের একটি শ্রেণির উল্লেখ করুন, এতে এখন 11টি নির্দিষ্ট পয়েন্ট রয়েছে:

a.my-class {
  color: green;
}

নির্বাচকের সাথে অন্যান্য শ্রেণী যোগ করুন, এটিতে এখন 21টি নির্দিষ্ট পয়েন্ট রয়েছে:

a.my-class.another-class {
  color: rebeccapurple;
}

নির্বাচকের সাথে href অ্যাট্রিবিউট যোগ করুন, এতে এখন 31টি নির্দিষ্ট পয়েন্ট রয়েছে:

a.my-class.another-class[href] {
  color: goldenrod;
}

সবশেষে, একটি :hover pseudo-class যোগ করুন, নির্বাচক 41 পয়েন্ট নির্দিষ্ট করে শেষ করে:

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

আপনার উপলব্ধি পরীক্ষা করুন

নির্দিষ্টতা স্কোরিং আপনার জ্ঞান পরীক্ষা

নিচের কোন নির্বাচকের মূল্য 21 পয়েন্ট ?

article > section

উপাদানগুলির মূল্য 1 পয়েন্ট, নির্বাচকের মধ্যে 2টি উপাদান রয়েছে, এটিকে 2 পয়েন্টের মূল্য দেয়৷

article.card.dark

উপাদানগুলির মূল্য 1 পয়েন্ট, ক্লাসগুলির মূল্য 10 পয়েন্ট, এবং 2টি ক্লাস এবং 1টি উপাদান সহ, যা এই নির্বাচককে 21 পয়েন্টের মূল্য দেয়৷

article:hover a[href]

উপাদানগুলির মূল্য 1 পয়েন্ট, ছদ্ম-শ্রেণী এবং বৈশিষ্ট্যগুলির মূল্য 10 পয়েন্ট, উপাদানগুলির জন্য 2 পয়েন্ট এবং বৈশিষ্ট্য এবং শ্রেণীগুলির জন্য 20 পয়েন্ট রয়েছে, এই নির্বাচককে 22 পয়েন্টের মূল্য দেয়।

সুনির্দিষ্টতা কল্পনা করা

ডায়াগ্রাম এবং নির্দিষ্টতা ক্যালকুলেটরগুলিতে, নির্দিষ্টতা প্রায়শই এইভাবে কল্পনা করা হয়:

বাম দল হল id নির্বাচক। দ্বিতীয় গ্রুপ হল ক্লাস, অ্যাট্রিবিউট এবং সিউডো-ক্লাস নির্বাচক। চূড়ান্ত গ্রুপ হল উপাদান এবং ছদ্ম-উপাদান নির্বাচক।

রেফারেন্সের জন্য, নিম্নলিখিত নির্বাচক হল 0-4-1 :

a.my-class.another-class[href]:hover {
  color: lightgrey;
}

আপনার উপলব্ধি পরীক্ষা করুন

নির্দিষ্টতা ভিজ্যুয়ালাইজিং আপনার জ্ঞান পরীক্ষা

নিম্নলিখিত নির্বাচকদের মধ্যে কোনটি 1-2-1 ?

section#specialty.dark

এই নির্বাচককে 1-1-1 হিসাবে কল্পনা করা হয়েছে।

#specialty:hover li.dark

🎉

[data-state-rad].dark#specialty:hover

এই নির্বাচককে 1-3-0 হিসাবে কল্পনা করা হয়েছে।

li#specialty section.dark

এই নির্বাচককে 1-1-2 হিসাবে কল্পনা করা হয়েছে।

বাস্তবসম্মতভাবে নির্দিষ্টতা বৃদ্ধি

ধরা যাক আমাদের এমন কিছু CSS আছে যা দেখতে এরকম:

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

এইচটিএমএল এর সাথে যা এইরকম দেখায়:

<button class="my-button" onclick="alert('hello')">Click me</button>

বোতামটির একটি ধূসর পটভূমি রয়েছে, কারণ দ্বিতীয় নির্বাচক নির্দিষ্টতার 11 পয়েন্ট অর্জন করে ( 0-1-1 )। কারণ এটির এক প্রকার নির্বাচক ( button ), যা 1 পয়েন্ট এবং একটি বৈশিষ্ট্য নির্বাচক ( [onclick] ), যা 10 পয়েন্ট ।

পূর্ববর্তী নিয়ম .my-button — 10 পয়েন্ট পায় ( 0-1-0 ), কারণ এটির একটি ক্লাস নির্বাচক রয়েছে।

আপনি যদি এই নিয়মটিকে একটি বুস্ট দিতে চান, তাহলে ক্লাস সিলেক্টরটিকে এভাবে পুনরাবৃত্তি করুন:

.my-button.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

এখন, বোতামটির একটি নীল পটভূমি থাকবে, কারণ নতুন নির্বাচক 20 পয়েন্টের একটি নির্দিষ্টতা স্কোর পায় ( 0-2-0 )।

সতর্কতা: আপনি যদি দেখেন যে আপনার ঘন ঘন নির্দিষ্টতা বাড়াতে হবে, তাহলে এটি নির্দেশ করতে পারে যে আপনি অত্যধিক নির্দিষ্ট নির্বাচক লিখছেন। এই সমস্যা এড়াতে অন্যান্য নির্বাচকদের নির্দিষ্টতা কমাতে আপনি আপনার CSS রিফ্যাক্টর করতে পারেন কিনা তা বিবেচনা করুন।

একটি ম্যাচিং নির্দিষ্টতা স্কোর নতুন উদাহরণ জয় দেখে

আপাতত বোতামের উদাহরণের সাথেই থাকুন এবং সিএসএসকে এটিতে স্যুইচ করুন:

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

বোতামটির একটি ধূসর পটভূমি রয়েছে, কারণ উভয় নির্বাচকের একটি অভিন্ন নির্দিষ্টতা স্কোর রয়েছে ( 0-1-0 )৷

আপনি যদি উত্স ক্রমে নিয়মগুলি স্যুইচ করেন তবে বোতামটি নীল হবে৷

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

এটিই একমাত্র উদাহরণ যেখানে নতুন CSS জিতেছে। এটি করার জন্য এটি অবশ্যই একই উপাদানকে লক্ষ্য করে এমন অন্য নির্বাচকের নির্দিষ্টতার সাথে মেলে।

সম্পদ

• CSS স্পেসিফিশিটি
• নির্দিষ্টতা ক্যালকুলেটর
• MDN নির্দিষ্টতা
• CSS স্পেসিফিকেশনের উপর স্পেসিফিকেশন
• আরেকটি নির্দিষ্টতা ক্যালকুলেটর