CSS-এ স্পেসিফিসিটি নিয়ম

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

এমন পরিস্থিতিও রয়েছে যখন একটি পৃষ্ঠা উপাদান একাধিক সিলেক্টরের সাথে মেলে। এই ক্ষেত্রে, বৈশিষ্ট্যের দ্বন্দ্বে জিতবে আরও সুনির্দিষ্ট, অর্থাৎ আরও সঠিক সিলেক্টর। আসুন স্পেসিফিসিটি নিয়মগুলি দেখি।

প্রথম নিয়ম

ক্লাস সর্বদা ট্যাগ সিলেক্টরকে হারায়:

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* এই রঙটি প্রয়োগ করা হবে */
}

দ্বিতীয় নিয়ম

আইডেন্টিফায়ার সর্বদা ক্লাসকে হারায়:

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* এই রঙটি প্রয়োগ করা হবে */
}

তৃতীয় নিয়ম

সমান শর্তে, সেই সিলেক্টর জিতবে যার আরও বেশি অংশ রয়েছে। উদাহরণস্বরূপ, যদি আমাদের কাছে দুটি ট্যাগ সিলেক্টর থাকে, তবে সেই সিলেক্টর জিতবে যার বেশি ট্যাগ রয়েছে:

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* এই রঙটি প্রয়োগ করা হবে */
}

যদি দুটি ক্লাস সিলেক্টর থাকে, তবে সেই সিলেক্টর জিতবে যেখানে আরও বেশি ক্লাস নির্দিষ্ট করা হয়েছে (যদি সেখানে ট্যাগ সিলেক্টর থাকে, তবে সেগুলি প্রভাবিত করে না):

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* এই রঙটি প্রয়োগ করা হবে */
}