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; /* මෙම වර්ණය යොදනු ඇත */
}