CSS নির্দিষ্টতা

সিএসএস স্পেসিফিসিটি ধারণাটি শুধুমাত্র একটি জিভ টুইস্টারের সামান্য বিট নয় (এটি তিনবার দ্রুত বলার চেষ্টা করুন!), তবে এটি কিছুটা মনকে বেন্ডারও হতে পারে! এটি CSS-এ উপলব্ধি করা আরও কঠিন ধারণাগুলির মধ্যে একটি। এই নিবন্ধে, আমরা নির্দিষ্টতা বলতে আমরা কী বুঝি, কীভাবে এটি গণনা করা হয় এবং কীভাবে নির্বাচকদের র‌্যাঙ্কিং পৃষ্ঠায় রেন্ডার করা শৈলী নির্ধারণ করে তা কভার করব। তাই বিরক্ত না! আপনি অল্প সময়ের মধ্যেই একজন বিশেষ বিশেষজ্ঞ হয়ে উঠবেন।

'নির্দিষ্টতা' মানে কি?

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

নির্দিষ্টতা চারটি সংখ্যা দ্বারা প্রতিনিধিত্ব করা হয়, প্রতিটি একটি কমা দ্বারা পৃথক করা হয়:

Selector specificity = 0, 0, 0, 0

যখন আমরা কমা ছাড়া চারটি সংখ্যার স্ট্রিং হিসাবে নির্দিষ্টতা দেখি (যেমন 0000, 0101, 1001, ইত্যাদি), তখন উচ্চতর সংখ্যাটি হল, আরো নির্দিষ্ট এটা.

র্যাঙ্ক অনুসারে নির্বাচকদের নির্দিষ্টতা (নিম্ন - উচ্চ):

চলুন র‌্যাঙ্কের উপর ভিত্তি করে বিভিন্ন ধরনের উপাদানের মধ্য দিয়ে চলুন:

• ＊

সর্বজনীন নির্বাচক। এর নির্দিষ্টতা হল 0, 0, 0, 0। সাধারণত আপনি স্টাইল শীটের শীর্ষে এগুলি দেখতে পাবেন। এটি গুরুত্বের দিক থেকে র্যাঙ্কের সর্বনিম্ন। মোটামুটি কিছু এটিকে ওভাররাইড করবে বা সার্বজনীন নির্বাচক CSS এ যোগ করবে।

• ＞, ➕, ‘ ‘ , ∼

সংযোজক, সাধারণত একটি টাইপ নির্বাচক বা শ্রেণি নির্বাচকের সন্তানের ভাইবোন নির্বাচন করার সময় দেখা যায়, নির্দিষ্টতার উপর কোন প্রভাব ফেলে না এবং সামগ্রিক সংখ্যার দিকে গণনা করা হয় না। নেগেশান সিউডো ক্লাস (:না) এই নির্দিষ্টতা বিভাগেও ফিট করে।

• div, form, ul, li, ইত্যাদি।

এগুলি হল টাইপ৷ নির্বাচক এই নির্বাচকরা আপনার HTML-এ ট্যাগ হিসাবে বিবেচিত হতে পারে এমন কিছুকে ঘিরে রাখে। এটির নির্দিষ্টতার ওজন হল 0, 0, 0, 1। যদি আপনার একাধিক প্রকার নির্বাচক থাকে একটির পর একটি কম্বিনেটর দ্বারা পৃথক করা হয়, তাহলে আপনি নির্বাচকদের একসাথে যোগ করবেন:

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

div li {} ⇐ the specificity is 0,0,0,2

div li p {} ⇐ the specificity is 0,0,0,3

• .প্রধান-ধারক, .navbar, [type="text"], :hover

সুনির্দিষ্টতার জন্য পরবর্তী লাইন হল ক্লাস, অ্যাট্রিবিউট এবং সিউডো-ক্লাস নির্বাচক।

ক্লাস নির্বাচকদের শুরুতে ডট (“.”) দ্বারা নির্দেশ করা হয়। অ্যাট্রিবিউট সিলেক্টরের টাইপ সিলেক্টরের পাশে বর্গাকার বন্ধনীর ভিতরে একটি অ্যাট্রিবিউট থাকে। ছদ্ম-শ্রেণির নির্বাচক বিশেষ উপাদানগুলির জন্য সংরক্ষিত যার জন্য আরও নির্দিষ্ট স্টাইলিং প্রয়োজন। এগুলোর একটি নির্দিষ্টতা আছে 0, 0, 1, 0।

div.navlink a {}

- নির্দিষ্টতা হল 0, 0, 1, 1 কারণ আমাদের একটি শ্রেণি নির্বাচক রয়েছে এবং আমাদের একটি প্রকার নির্বাচক রয়েছে।

div.header li.list-item-disc button[type="submit"] {} 

– নির্দিষ্টতা হল 0, 0, 3, 3 কারণ আমাদের কাছে 3 প্রকার নির্বাচক এবং 2 শ্রেণী নির্বাচক + 1 বৈশিষ্ট্য নির্বাচক রয়েছে। যদি আমরা অ্যাট্রিবিউট নির্বাচককে বন্ধ করে দেই, তাহলে নির্দিষ্টতা হবে 0, 0, 2, 3। কারণ 23 33-এর থেকে কম, 0, 0, 3, 3 নির্দিষ্টতার সাথে CSS নির্বাচক বিজয়ী হবে কারণ এটির উচ্চতর নির্দিষ্টতা রয়েছে।

• #নীল, #লুকানো, ইত্যাদি

আইডি নির্বাচকদের সিএসএস নির্বাচকদের মধ্যে সর্বোচ্চ নির্দিষ্টতা রয়েছে:1, 0, 0, 0। আইডি অ্যাট্রিবিউটের সংজ্ঞার অনন্য প্রকৃতির কারণে, আমরা যখন আমাদের সিএসএস-এ আইডি কল করি তখন আমরা সাধারণত একটি নির্দিষ্ট উপাদান স্টাইল করি।

div#orange {}

- নির্দিষ্টতা হল 1, 0, 0, 1 কারণ আমাদের একটি টাইপ নির্বাচক এবং একটি আইডি নির্বাচক রয়েছে। নিম্নলিখিতগুলির মধ্যে আমাদের নির্দিষ্টতার নিয়ম অনুসারে কোন শৈলীটি জয়ী হয়?

div#orange {
	background-color: orange;
}
div.square {
	background-color: green;
	width: 150px;
	height: 150px;
}

1. প্রথম ডিভিতে একটি টাইপ নির্বাচক এবং একটি আইডি নির্বাচক রয়েছে, যা এটিকে সামগ্রিকভাবে 1, 0, 0, 1 করে তোলে৷
2. দ্বিতীয় ডিভটিতে একটি টাইপ নির্বাচক এবং একটি শ্রেণি নির্বাচক রয়েছে, যা এটিকে সামগ্রিকভাবে 0, 0, 1, 1 করে তোলে৷

যেহেতু 1001 11 এর থেকে বড়, তাই প্রথম ডিভ জিতেছে এবং পটভূমির রঙ হবে কমলা, CSS এর ক্যাসকেডিং প্রকৃতির বিপরীতে।

• ইনলাইন-স্টাইল

কিভাবে ইনলাইন-স্টাইল এই সব মধ্যে মাপসই করা হয়? এটি আরও আরও আইডি নির্বাচকদের চেয়ে নির্দিষ্ট। একটি ইনলাইন-শৈলী আপনার সিএসএস ফাইলের যেকোন কিছু সম্পর্কেই তুঙ্গে উঠবে। এটি নির্দিষ্টতার দিক থেকে সর্বোচ্চ ওজনযুক্ত।

• !important নিয়ম

!important কীওয়ার্ড সবকিছুকে ছাড়িয়ে যায়। এটি সবচেয়ে সুনির্দিষ্ট এবং CSS দ্বারা সেট করা কোনো পূর্ববর্তী নিয়ম ওভাররাইট করবে।

অভ্যাস করুন

নীচের কোড এডিটরে, আমি কিছু র্যান্ডম ক্লাস নাম এবং আইডি নাম সহ নমুনা পাত্রের একটি পৃষ্ঠা তৈরি করেছি। আমি চাই আপনি একটু সময় নিন এবং আপনার CSS দক্ষতা ব্যবহার করে নির্দিষ্ট উপাদানগুলিকে ভিন্ন রঙে পরিবর্তন করতে অনুশীলন করুন যখন অন্যান্য সমস্ত ডিভ একই রঙে থাকবে। আপনি কিভাবে CSS এ নিয়ম লিখবেন? সর্বোচ্চ নির্দিষ্টতা পেতে আপনি কী ব্যবহার করবেন যদি একটি নির্দিষ্ট উপাদানকে লক্ষ্য করার জন্য আপনাকে এটি ব্যবহার করতে হবে।

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>CSS Specificity</title>
       <style>
           body {
               width: 100%;
               max-width: 800px;
               margin: 0 auto;
           }
 
           main {
               width: 100%;
               height: 800px;
               display: flex;
               flex-wrap: wrap;
               flex-direction: column;
           }
 
           div {
               text-align: center;
           }
           *.square {
               /* what does the star mean here? Does it add to the specificity number at all? How can you test your hypothesis?  */
               height: 150px;
               width: 150px;
               background-color: black;
               color: white;
               margin: 20px;
           }
 
           div.flex {
               /* Does this compete with the other class at all? Or does it work in conjunction with the .square class? What would happen if we added a width and a height to this selector? Why does that happen?
          
               Does this override the div selector? Why? How does its specificity compare to the div selector's specificity?
          
               */
               display: flex;
               justify-content: center;
               align-items: center;
           }
           div#red {
               /* why does this one win out? What is the specificity of this div? */
               background-color: darkred;
           }
           #red {
               /* What would happen if we took the 'div' out of the previous selector? Which one wins?  */
               background-color: red;
           }
 
           main > div {
               font-size: 55px;
               font-weight: bold;
           }
 
           div#self-align {
               /*  What happens here?  */
               align-self: center;
           }
       </style>
   </head>
   <body>
       <main>
           <div id="self-align" class="square flex">1</div>
           <div class="square flex">2</div>
           <div class="square flex">3</div>
           <div class="square flex">4</div>
           <div class="square flex">5</div>
           <div id="red" class="square flex">6</div>
           <div class="square flex">7</div>
           <div class="square flex">8</div>
           <div class="square flex">9</div>
           <div class="square flex">10</div>
           <div class="square flex">11</div>
           <div class="square flex">12</div>
       </main>
   </body>
</html>

উপসংহার

এই নিবন্ধে আমরা CSS নির্দিষ্টতা নিয়ে আলোচনা করেছি - বিশেষত কোন নির্বাচকরা অন্যদের চেয়ে বেশি নির্দিষ্ট এবং আমরা কীভাবে প্রকৃত নির্দিষ্টতা সংখ্যা বের করি। নিরুৎসাহিত হবেন না যদি এটি প্রথম পাঠের মাধ্যমে অবিলম্বে আপনার কাছে না আসে। এটি হজম করার মতো অনেক তথ্য। এটি চালিয়ে যান এবং আপনি শীঘ্রই এটি পাবেন!