বিশেষত্ব

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

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

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

.branding {
  color: blue;
}

button {
  color: red;
}

এখানে একই উপাদান লক্ষ্য দুটি নিয়ম আছে. প্রতিটি নিয়মে একটি ঘোষণা রয়েছে যা বোতামের রঙ সেট করতে চায়: একটি বোতামটিকে লাল রঙ করার চেষ্টা করে এবং অন্যটি এটিকে নীল রঙ করার চেষ্টা করে। কোন ঘোষণা উপাদান প্রয়োগ করা হয়?

CSS নির্দিষ্টতা অ্যালগরিদম বোঝা হল প্রতিযোগী ঘোষণার মধ্যে CSS কীভাবে সিদ্ধান্ত নেয় তা বোঝার চাবিকাঠি।

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

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

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

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

নির্দিষ্টতা একটি দশমিক সংখ্যা নয় কিন্তু একটি ত্রয়ী যা তিনটি উপাদান নিয়ে গঠিত: A , B , এবং C

  • A : আইডির মতো নির্দিষ্টতা
  • B : শ্রেণীর মত নির্দিষ্টতা
  • C : উপাদানের মতো নির্দিষ্টতা

এটি প্রায়ই (A,B,C) স্বরলিপি ব্যবহার করে উপস্থাপন করা হয়। উদাহরণস্বরূপ: (1,0,2) । বিকল্প ABC স্বরলিপিও সাধারণত ব্যবহৃত হয়।

নির্দিষ্টতার তিনটি উপাদান (A, B, C) দেখানো একটি চিত্র। প্রতিটি উপাদানের জন্য, চিত্রটি দেখায় যে এটি কী প্রতিনিধিত্ব করে এবং কিছু উদাহরণ নির্বাচক যা এটিকে প্রভাবিত করে।
একটি ডায়াগ্রাম যা বিভিন্ন নির্বাচকদের নির্দিষ্টতার কোন উপাদানকে প্রভাবিত করে তা প্রদর্শন করে।

বিশেষত্ব তুলনা

ক্রমানুসারে তিনটি উপাদানের তুলনা করে নির্দিষ্টতা তুলনা করা হয়: একটি বড় A মান সহ নির্দিষ্টতা আরও নির্দিষ্ট; যদি দুটি A মান বাঁধা হয়, তাহলে একটি বৃহত্তর B মানের সাথে নির্দিষ্টতা আরও সুনির্দিষ্ট; যদি দুটি B মানও বাঁধা হয়, তাহলে একটি বৃহত্তর C মানের সাথে নির্দিষ্টতা আরও সুনির্দিষ্ট; যদি সমস্ত মান বাঁধা হয়, দুটি নির্দিষ্টতা সমান।

উদাহরণস্বরূপ, (1,0,0) (0,4,3) এর চেয়ে উচ্চতর নির্দিষ্টতা হিসাবে বিবেচনা করা হয় কারণ (1,0,0) এর A মান (যা 1 ) (0,4,3) ) থেকে A মানের চেয়ে বেশি (0,4,3) (যা 0 )

নির্বাচকরা নির্দিষ্টতা প্রভাবিত করে

নির্দিষ্টতা ট্রায়াডের প্রতিটি অংশ 0 এর মান দিয়ে শুরু হয়, তাই ডিফল্ট নির্দিষ্টতা হল (0,0,0) । নির্বাচকের প্রতিটি অংশ নির্দিষ্টতা বাড়ায় যা নির্বাচকের প্রকারের উপর নির্ভর করে, A , B , বা C এর মান বৃদ্ধি করে।

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

একটি সার্বজনীন নির্বাচক ( * ) কোন নির্দিষ্টতা যোগ করে না, এর মান (0,0,0) এর প্রাথমিক নির্দিষ্টতায় রেখে যায়।

* {
  color: red;
}

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

একটি উপাদান (টাইপ) বা ছদ্ম-উপাদান নির্বাচক উপাদানের মতো নির্দিষ্টতা যোগ করে যা C উপাদানকে 1 দ্বারা বৃদ্ধি করে।

নিম্নলিখিত উদাহরণগুলির একটি সামগ্রিক নির্দিষ্টতা রয়েছে (0,0,1) ।

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

div {
  color: red;
}

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

::selection {
  color: red;
}

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

একটি শ্রেণী , ছদ্ম-শ্রেণী বা বৈশিষ্ট্য নির্বাচক শ্রেণী-মত নির্দিষ্টতা যোগ করে যা B উপাদানকে 1 দ্বারা বৃদ্ধি করে।

নিম্নলিখিত উদাহরণগুলির একটি নির্দিষ্টতা রয়েছে (0,1,0) ।

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

.my-class {
  color: red;
}

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

:hover {
  color: red;
}

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

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

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

একটি আইডি নির্বাচক আইডি-এর মতো নির্দিষ্টতা যোগ করে যা A উপাদানটিকে 1 দ্বারা বৃদ্ধি করে, যতক্ষণ না আপনি একটি আইডি নির্বাচক ( #myID ) ব্যবহার করেন এবং একটি বৈশিষ্ট্য নির্বাচক ( [id="myID"] ) ব্যবহার করেন না।

নিম্নলিখিত উদাহরণে, নির্দিষ্টতা হল (1,0,0)

#myID {
  color: red;
}

অন্যান্য নির্বাচক

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

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

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

এই নমুনার একটি নির্দিষ্টতা (0,1,1) কারণ এটির একটি প্রকার নির্বাচক ( div ) এবং :not() এর ভিতরে একটি শ্রেণী রয়েছে।

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

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

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

(0,0,1)
a এর মূল্য (0,0,1) , কিন্তু [href="#"] এর মূল্য (0,1,0) ।
(0,1,0)
আবার চেষ্টা করুন! a এর মূল্য (0,0,1) , কিন্তু [href="#"] এর মূল্য (0,1,0) ।
(0,1,1)
a এর মূল্য (0,0,1) এবং [href="#"] এর মূল্য (0,1,0) , যা (0,1,1) এর মোট নির্দিষ্টতা তৈরি করে।

যে কারণগুলি নির্দিষ্টতা প্রভাবিত করে না

নির্দিষ্টতা প্রভাবিত নিম্নলিখিত কারণ সম্পর্কে কিছু সাধারণ ভুল ধারণা আছে.

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

একটি উপাদানের style বৈশিষ্ট্যে সরাসরি CSS প্রয়োগ করা হয়, নির্দিষ্টতাকে প্রভাবিত করে না কারণ এটি ক্যাসকেডের একটি ভিন্ন ধাপ যা নির্দিষ্টতার আগে মূল্যায়ন করা হয়। 

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

একটি স্টাইল শীটের মধ্যে থেকে এই ঘোষণাটি ওভাররাইড করার জন্য, আপনাকে ক্যাসকেডের পূর্ববর্তী ধাপে ঘোষণার জয় পেতে অবলম্বন করতে হবে।

উদাহরণস্বরূপ, আপনি এতে !important যোগ করতে পারেন, যাতে এটি অথরেড !important মূলের অংশ হয়ে যায়।

!important ঘোষণা

CSS ঘোষণার শেষে একটি !important নির্দিষ্টতাকে প্রভাবিত করে না কিন্তু ঘোষণাটিকে একটি ভিন্ন মূলে রাখে, যথা Authored !important ।

নিম্নলিখিত উদাহরণে, .my-class এর নির্দিষ্টতা জয়ের জন্য !important ঘোষণার জন্য প্রাসঙ্গিক নয়৷ 

.my-class {
  color: red !important;
  color: white;
}

যখন দুটি ঘোষণা !important , তখন নির্দিষ্টতা আবার খেলায় আসে, কারণ ক্যাসকেড থেকে উৎপত্তি পদক্ষেপটি এখনও বিজয়ী নির্ধারণ করতে সক্ষম হয়নি৷ 

.branding {
  color: blue !important;
}

button {
  color: red !important;
}

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

যখন একটি জটিল বা যৌগ নির্বাচক ব্যবহার করা হয়, সেই নির্বাচকের প্রতিটি অংশ নির্দিষ্টতা পর্যন্ত যোগ করে। এই উদাহরণ HTML বিবেচনা করুন: 

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

এই লিঙ্কে দুটি ক্লাস আছে। নিম্নলিখিত CSS-এর নিয়মটির একটি নির্দিষ্টতা রয়েছে (0,0,1) : 

a {
  color: red;
}

আপনি যদি নির্বাচকের ক্লাসগুলির মধ্যে একটি উল্লেখ করেন তবে এটির এখন (0,1,1) একটি নির্দিষ্টতা রয়েছে: 

a.my-class {
  color: green;
}

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

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

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

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

সবশেষে, একটি :hover pseudo-class যোগ করুন, নির্বাচক (0,4,1) এর একটি নির্দিষ্টতার সাথে শেষ হয় : 

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

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

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

নিচের কোন নির্বাচকের (0,2,1) একটি নির্দিষ্টতা আছে?

article > section
উপাদানগুলি উপাদানের মতো নির্দিষ্টতা (`C` উপাদান) যোগ করে। নির্বাচকের মধ্যে 2টি উপাদান রয়েছে, এটির একটি নির্দিষ্টতা রয়েছে (0,0,2) ।
article.card.dark
উপাদানগুলি উপাদানের মতো নির্দিষ্টতা (`C` উপাদান) যোগ করে এবং শ্রেণীগুলি শ্রেণির মতো নির্দিষ্টতা (`B` উপাদান) যোগ করে। 2টি শ্রেণী এবং 1টি উপাদান সহ, যা এই নির্বাচকের একটি নির্দিষ্টতা (0,2,1) তৈরি করে।
article:hover a[href]
উপাদানগুলি উপাদানের মতো নির্দিষ্টতা (`C` উপাদান) যোগ করে, ছদ্ম-শ্রেণী এবং বৈশিষ্ট্যগুলি শ্রেণির মতো নির্দিষ্টতা (`B` উপাদান) যোগ করে। এখানে 2টি উপাদান নির্বাচক (2 × (0,0,1) ), একটি বৈশিষ্ট্য নির্বাচক (মূল্য (0,0,1) ), এবং একটি শ্রেণি নির্বাচক (মূল্য (0,0,1) ) রয়েছে। এর ফলে এই নির্বাচকের মোট নির্দিষ্টতা রয়েছে (0,2,2) ।

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

বলুন আপনার কিছু CSS আছে যা দেখতে এইরকম: 

.my-button {
  background: blue;
}

button[onclick] {
  background: grey;
}

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

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

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

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

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

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

button[onclick] {
  background: grey;
}

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

নির্দিষ্টতার একটি টাই ক্যাসকেডের পরবর্তী ধাপে ফিরে আসে

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

.my-button {
  background: blue;
}

[onclick] {
  background: grey;
}

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

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

[onclick] {
  background: grey;
}

.my-button {
  background: blue;
}

এর কারণ উভয় নির্বাচকদের একই নির্দিষ্টতা রয়েছে। এই ক্ষেত্রে, ক্যাসকেড চেহারা ধাপের ক্রম ফিরে পড়ে।

সম্পদ