CSS বৈশিষ্ট্যের উত্তরাধিকার

ধরা যাক আমাদের একটি অনুচ্ছেদ আছে, এবং তার মধ্যে i ট্যাগে কিছু লেখা আছে:

<p>
	This is some <i>text</i> in paragraph.
</p>

আসুন অনুচ্ছেদগুলো লাল রঙে রাঙাই:

p {
	color: red;
}

ফলস্বরূপ শুধুমাত্র অনুচ্ছেদের লেখাই নয়, i ট্যাগের লেখাও রঙিন হবে:

সমস্যাটি হল যে color বৈশিষ্ট্য উত্তরাধিকারসূত্রে প্রাপ্ত। এর মানে হল যদি প্যারেন্ট ট্যাগের কোনো রঙ নির্ধারণ করা থাকে, তবে সেই রঙটি চাইল্ড এলিমেন্টেরও হবে। সব CSS বৈশিষ্ট্য উত্তরাধিকারসূত্রে প্রাপ্ত নয়, তবে অনেকগুলোই হয় (আপনি যেগুলো জানেন তার মধ্যে - সবগুলোই উত্তরাধিকারসূত্রে প্রাপ্ত)।

ইচ্ছা করলে, তবে, চাইল্ড এলিমেন্টের সিলেক্টর নির্ধারণ করে প্যারেন্টের বৈশিষ্ট্য ওভাররাইড করা যেতে পারে। উদাহরণস্বরূপ, আসুন অনুচ্ছেদকে লাল রঙ নির্ধারণ করি, এবং ইটালিককে নীল রঙ নির্ধারণ করি:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

এক্ষেত্রে CSS কোডে সিলেক্টরের ক্রম কোন ব্যাপার নয়। যদি i সিলেক্টর এবং p সিলেক্টর স্থান পরিবর্তন করা হয়, তবুও একইভাবে কাজ করবে:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

কোডটি অধ্যয়ন করে বলুন b ট্যাগের লেখার কী রঙ হবে:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

কোডটি অধ্যয়ন করে বলুন b ট্যাগের লেখার কী রঙ হবে:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

কোডটি অধ্যয়ন করে বলুন b ট্যাগের লেখার কী রঙ হবে:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

কোডটি অধ্যয়ন করে বলুন li ট্যাগের লেখার কী রঙ হবে:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

কোডটি অধ্যয়ন করে বলুন li ট্যাগের লেখার কী রঙ হবে:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

কোডটি অধ্যয়ন করে বলুন i ট্যাগের লেখার কী রঙ হবে:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

কোডটি অধ্যয়ন করে বলুন i ট্যাগের লেখার কী সাইজ হবে:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}