সিএসএস একটি নির্বাচকের শক্তি নির্ধারণ করতে একটি সংখ্যাসূচক স্কেল ব্যবহার করে। শক্তি, কোনটিতে সবচেয়ে শক্তিশালী, বা অন্য কথায়, কোন নির্বাচকের নির্দিষ্টতা সবচেয়ে বেশি। সর্বোচ্চ নির্দিষ্টতা সংখ্যা সহ নির্বাচক সর্বদা নির্দেশ করবে একটি HTML উপাদান কেমন দেখায়, অন্য দুর্বল নির্বাচকদের দ্বারা এটিতে কোন শৈলী প্রয়োগ করা হোক না কেন।
আপনার যদি একটি বোতাম উপাদান থাকে তবে এটিতে শৈলী প্রয়োগ করার অনেক উপায় রয়েছে। CSS-এ 3টি সাধারণভাবে ব্যবহৃত নির্বাচক হল type , class , id .
আপনি টাইপ নির্বাচকের মাধ্যমে সরাসরি একটি উপাদানকে স্টাইল করতে পারেন:
button {
background-color: red;
}আপনি একটি ক্লাস অ্যাট্রিবিউট ব্যবহার করতে পারেন:
.button {
background-color: red;
}অথবা একটি আইডি অ্যাট্রিবিউট:
#button {
background-color: red;
}প্রতিটি নির্বাচকের একটি সাংখ্যিক মান 1।
সুতরাং উপরের সমস্ত সিএসএস নির্বাচকের (টাইপ, ক্লাস, আইডি) একই মান (1) থাকলে, একই স্টাইল শীটে ব্যবহার করা হলে উপরের নিয়ম-সেটগুলির মধ্যে কোনটি জয়ী হয়?
আইডি জিতেছে (#button ) কারণ আইডিগুলি ক্লাস এবং টাইপ নির্বাচকদের চেয়ে অগ্রাধিকার পায়।
যদি কোন আইডি জড়িত না থাকে?
তারপর ক্লাস সিলেক্টর (.button ) জিতেছে কারণ ক্লাসগুলি টাইপ নির্বাচকদের চেয়ে প্রাধান্য পায়৷
অপেক্ষা করুন, CSS-এর "ক্যাসকেড" (CSS =ক্যাসকেডিং স্টাইল শীট) সম্পর্কে কী হবে?
CSS-এ, যদি সবকিছু সমান হয় , আপনার স্টাইল শীটে যে কোনো নির্বাচক সর্বশেষ প্রয়োগ করা হয়, জয়ী হয়।
ধরুন আপনি একই নামের সাথে 3টি ক্লাস যোগ করুন (.hero-button ,) আপনার স্টাইলশীটে। প্রতিটি ক্লাস একই স্টাইলিং বৈশিষ্ট্যকে লক্ষ্য করে (background-color ), কিন্তু প্রতিটি শ্রেণীর মান আলাদা বৈশিষ্ট্য রয়েছে , এই ক্ষেত্রে, সবুজ, নীল, লাল, যথাক্রমে.
.hero-button {
background-color: green;
}
.hero-button {
background-color: blue;
}
.hero-button {
background-color: red;
}তারপরে আপনি তাদের 3টির সবকটি একই HTML উপাদানে প্রয়োগ করুন:
<button class="hero-button">Button</button>
শেষ .hero-button স্টাইলশীটে ক্লাসটি একই শ্রেণীর নামের সাথে আগের যেকোনো ক্লাসের আগে থাকবে, আপনার বোতামের পটভূমির রঙ লাল করে দেবে। এভাবেই CSS ক্যাসকেড কাজ করে, নির্দিষ্টতার ক্রম উপরে থেকে নীচে, নীচের নির্বাচক বিজয়ী হয়। মনে রাখবেন, এটি শুধুমাত্র 100% সত্য যখন সমস্ত জিনিস সমান হয়।
গুরুত্বপূর্ণ:আপনার যদি একই নামের একাধিক নির্বাচক থাকে, তবে আপনার স্টাইলশীটের নীচের একটি না হবে সমস্ত ওভাররাইড করুন একই নামের পূর্ববর্তী নির্বাচক দ্বারা প্রয়োগ করা শৈলী, এটি শুধু হবে নির্দিষ্ট স্টাইলিং সম্পত্তি ওভাররাইড করুন।
বিভ্রান্ত?
চিন্তা করবেন না, এটি এক মুহূর্তের মধ্যে বোঝা যাবে।
এখানে 3টি .hero-button আছে আগে থেকে ক্লাস, সব একই background-color সহ আগে থেকে বৈশিষ্ট্য, কিন্তু প্রথম দুটি ক্লাসের সাথে প্রত্যেকে একটি অতিরিক্ত স্টাইলিং সম্পত্তি (padding &font-size ):
.hero-button {
background-color: green;
padding: 2rem;
}
.hero-button {
background-color: blue;
font-size: 2rem;
}
.hero-button {
background-color: red;
}আমাদের স্টাইলশীটে এখন 3টি CSS ক্লাস রয়েছে, একই নামের সাথে, সবগুলোই একই ব্যাকগ্রাউন্ড-রঙের বৈশিষ্ট্যকে HTML বোতাম উপাদানে লক্ষ্য করে — কিন্তু প্রথম দুটি ক্লাসে অতিরিক্ত স্টাইলিং বৈশিষ্ট্য রয়েছে। আপনি কি মনে করেন?
এখানে ফলাফল:
https://codepen.io/StrengthandFreedom/pen/mdyMGPL
আপনি দেখতে পাচ্ছেন, আমাদের বোতাম উপাদান আমাদের 3 .hero-button থেকে সমস্ত স্টাইলিং বৈশিষ্ট্যগুলিকে একত্রিত করে (একত্রিত করে) ক্লাস, এবং এখন আমাদের বোতাম উপাদান 3টি বৈশিষ্ট্য পায়:
padding: 2rem;
font-size: 2rem;
background-color: red;অন্য কথায়, যখন আপনার স্টাইলশীটে অভিন্ন নাম সহ CSS নির্বাচক থাকে, তখন আপনি কেবলমাত্র সেই বৈশিষ্ট্যগুলিকে ওভাররাইড করতে পারবেন যদি আপনার নির্বাচকরা একই বৈশিষ্ট্যগুলিকে লক্ষ্য করে।
উপরের উদাহরণে, সমস্ত 3টি ক্লাসই background-color লক্ষ্য করে সম্পত্তি, এবং এখানে CSS ক্যাসকেড নিয়ম (অর্ডার স্পেসিফিসিটি) এর কারণে নীচের শ্রেণী জিতেছে। কিন্তু শেষ .hero-button থেকে আপনার স্টাইলশীট টার্গেটে ক্লাস, না padding অথবা font-size সম্পত্তি, প্রথম দুটি .hero-button থেকে সেই বৈশিষ্ট্যগুলি ক্লাসগুলিকে বোতাম উপাদানে প্রয়োগ করার অনুমতি দেওয়া হয়।
আমি এই বিন্দুতে মৃত ঘোড়াকে হারানোর কারণ হল যে আপনি অনিবার্যভাবে নিজেকে এমন একটি পরিস্থিতিতে খুঁজে পাবেন যেখানে আপনি একটি বিশাল, অসংগঠিত CSS কোডবেসের সাথে কাজ করছেন, যেখানে একাধিক বিকাশকারীরা আপনার জীবনকে দুর্বিষহ করে তুলতে অবদান রেখেছেন।
সবচেয়ে সাধারণ পরিস্থিতিগুলির মধ্যে একটি হল যে বিভিন্ন বিকাশকারীরা স্টাইলশীটে CSS ক্লাস যুক্ত করেছে যা ইতিমধ্যেই অন্য কোথাও বিদ্যমান, এবং এটি দ্রুত বিভ্রান্তির কারণ হবে যদি আপনি না জানেন বা ভুলে যান যে CSS বৈশিষ্ট্যগুলিকে একসাথে স্ট্যাক করবে যেমনটি আমরা আগে দেখেছি।
তাই আপনি একটি CSS ক্লাস যোগ করতে পারেন:primary-button নিম্নলিখিত বৈশিষ্ট্য সহ:
.primary-button {
background-color: red
padding: 1rem;
font-size: 1.125rem;
}তবুও কিছু কারণে, আপনার বোতামটিতে একটি ছায়া আছে বলে মনে হচ্ছে, যা আপনি যোগ করেননি। ঠিক আছে, এটি কয়েকটি জিনিসের কারণে হতে পারে, কারণ কেউ বোতাম উপাদানটিতে সরাসরি স্টাইলিং প্রয়োগ করেছে:
button {
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
অথবা কেউ পূর্বে একই নামের স্টাইলশীটে একটি ক্লাস যোগ করেছে এবং box-shadow যোগ করেছে বলে সম্পত্তি, এই মত:
.primary-button {
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
}
অবাঞ্ছিত স্টাইলিং অপসারণ করতে, আপনাকে হয় আপনার কোডবেসের সেই স্থানটি সনাক্ত করতে হবে যেখানে এই অবাঞ্ছিত সম্পত্তি প্রয়োগ করা হয়েছে এবং এটিকে সরিয়ে ফেলতে হবে বা সরাসরি লক্ষ্যবস্তু করে আপনার এ সরিয়ে ফেলতে হবে .primary-button ক্লাস, এই মত:
.primary-button {
background-color: red
padding: 1rem;
font-size: 1.125rem;
box-shadow: 0; /*removes existing box shadow value*/
}আমি জানি আপনি কি ভাবছেন। এটি একটি সমস্যা সমাধানের একটি অগোছালো উপায়। সঠিক। কিন্তু কখনও কখনও আপনি একটি বিশাল এবং অসংগঠিত প্রকল্পের (সাধারণত প্রচুর লিগ্যাসি কোড সহ) উন্মোচিত হবেন, যেখানে আপনার কাছে বিদ্যমান সমস্ত CSS কোড অ্যাক্সেস নেই (কিছু অভিজ্ঞতা সহ যেকোন বিকাশকারী এটির সাথে সম্পর্কিত হতে পারে)। এই ধরনের পরিস্থিতিতে, আপনি আপনার ইচ্ছামতো বিদ্যমান কোড পরিবর্তন করতে পারবেন না — আপনাকে বিদ্যমান কোডকে ওভাররাইড করতে হবে এবং সেক্ষেত্রে, CSS নির্দিষ্টতা এবং উত্স অর্ডার কীভাবে কাজ করে তা জেনে রাখা ভালো।
আপনি এই ওয়েবসাইটে নির্দিষ্টতা ক্যালকুলেটর ব্যবহার করতে পারেন বিভিন্ন CSS নির্বাচকের নির্দিষ্টতা সংখ্যার তুলনা করতে, যার মধ্যে রয়েছে গ্রুপ নির্বাচক (নির্বাচকের সমন্বয়)।
টিপ:CSS-এ নির্দিষ্টতার সমস্যাগুলি এড়াতে একটি ভাল উপায় হল টাইপ নির্বাচকদের পরিবর্তে আপনার UI স্টাইল করার জন্য প্রাথমিকভাবে ক্লাসগুলি ব্যবহার করা এবং শুধুমাত্র আইডিগুলি অল্প ব্যবহার করা। এছাড়াও, আপনি যদি পারেন তবে গ্রুপ নির্বাচকদের ব্যবহার এড়িয়ে চলুন কারণ তারা একটি ক্রমবর্ধমান কোডবেসে অপ্রত্যাশিত সমস্যার কারণ হতে পারে।
