CSS Specificity

CSS சிறப்புத்தன்மை என்பது ஒரு உறுப்புக்கு இறுதியாக எந்த பாணி அறிவிப்பு (style declaration) பயன்படுத்தப்படுகிறது என்பதை தீர்மானிக்கும் ஒரு அல்காரிதம் ஆகும்.

இரண்டு அல்லது அதற்கு மேற்பட்ட CSS விதிகள் ஒரே உறுப்பைச் சுட்டிக்காட்டினால், அதிக சிறப்புத்தன்மை கொண்ட அறிவிப்பு "வெற்றி பெறும்", மேலும் அந்த பாணி HTML உறுப்புக்குப் பயன்படுத்தப்படும்.

🎯 Jassif Team உதவிக்குறிப்பு:

CSS சிறப்புத்தன்மை புரிந்துகொள்வது CSS முரண்பாடுகளை (conflicts) தீர்க்க மிகவும் முக்கியமானது. இது எந்த பாணி விதிகள் மற்றவற்றை மேலெழுதும் (override) என்பதை தீர்மானிக்கிறது.

அடிப்படை எடுத்துக்காட்டுகள்

எடுத்துக்காட்டு 1: உறுப்பு தேர்வாளர் (Element Selector)

இங்கே, <p> உறுப்புகளுக்கு சிவப்பு நிறத்தை குறிப்பிட்டுள்ளோம்:

<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>

<p>Hello World!</p>

</body>
</html>

எடுத்துக்காட்டு 2: வகுப்பு தேர்வாளர் (Class Selector)

இங்கே, "test" என்ற வகுப்பு தேர்வாளரைச் சேர்த்துள்ளோம்:

<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p class="test">Hello World!</p>

</body>
</html>

💡 Jassif Team விளக்கம்:

வகுப்பு தேர்வாளருக்கு உறுப்பு தேர்வாளரை விட அதிக சிறப்புத்தன்மை உள்ளது, எனவே உரை பச்சை நிறத்தில் தோன்றும்.

எடுத்துக்காட்டு 3: ID தேர்வாளர் (ID Selector)

இங்கே, "demo" என்ற ID தேர்வாளரைச் சேர்த்துள்ளோம்:

<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

💡 Jassif Team விளக்கம்:

ID தேர்வாளருக்கு வகுப்பு தேர்வாளரை விட அதிக சிறப்புத்தன்மை உள்ளது, எனவே உரை நீல நிறத்தில் தோன்றும்.

எடுத்துக்காட்டு 4: உள்ளிணைந்த பாணி (Inline Style)

இங்கே, உள்ளிணைந்த பாணியைச் சேர்த்துள்ளோம்:

<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>

<p id="demo" class="test" style="color: pink;">Hello World!</p>

</body>
</html>

💡 Jassif Team விளக்கம்:

உள்ளிணைந்த பாணிக்கு அதிகபட்ச சிறப்புத்தன்மை உள்ளது, எனவே உரை இளஞ்சிவப்பு நிறத்தில் தோன்றும்.

CSS Specificity Hierarchy

ஒவ்வொரு வகை CSS தேர்வாளரும் சிறப்புத்தன்மை படிநிலையில் ஒரு நிலையைக் கொண்டுள்ளது, மேலும் தேர்வாளர் வகைகள் வெவ்வேறு "எடைகளை" கொண்டு செல்கின்றன.

Inline Styles

அதிக முன்னுரிமை

1-0-0-0

ID Selectors

இரண்டாவது அதிக முன்னுரிமை

0-1-0-0

Classes/Attributes

மூன்றாவது அதிக முன்னுரிமை

0-0-1-0

Elements

குறைந்த முன்னுரிமை

0-0-0-1

தேர்வாளர்	எடுத்துக்காட்டு	விளக்கம்	எடை
Inline styles	<h1 style="color: pink;">	அதிகபட்ச முன்னுரிமை, மற்ற அனைத்து தேர்வாளர்களையும் மேலெழுதும்	1-0-0-0
ID selectors	#navbar	இரண்டாவது அதிக முன்னுரிமை	0-1-0-0
Classes, attribute selectors and pseudo-classes	.test, [type="text"], :hover	மூன்றாவது அதிக முன்னுரிமை	0-0-1-0
Elements and pseudo-elements	h1, ::before, ::after	குறைந்த முன்னுரிமை	0-0-0-1
Universal selector and :where()	*, where()	முன்னுரிமை இல்லை	0-0-0-0

எடுத்துக்காட்டு: சிறப்புத்தன்மை படிநிலை மற்றும் எடை

<html>
<head>
<style>
#demo {color: blue;} /* எடை: 1-0-0 */
p#demo {color: orange;} /* எடை: 1-0-1 - வெற்றி! */
.test {color: green;} /* எடை: 0-1-0 */
p.test {color: green;} /* எடை: 0-1-1 */
p {color: red;} /* எடை: 0-0-1 */
</style>
</head>
<body>

<p id="demo" class="test">Hello World!</p>

</body>
</html>

🚀 Jassif Team உதவிக்குறிப்பு:

எடைகளை a-b-c-d வடிவத்தில் நினைத்துக் கொள்ளுங்கள், இங்கு:
a = உள்ளிணைந்த பாணிகள்
b = ID தேர்வாளர்கள்
c = வகுப்புகள், பண்புக்கூறுகள், போலி-வகுப்புகள்
d = உறுப்புகள் மற்றும் போலி-உறுப்புகள்

மேலும் சிறப்புத்தன்மை எடுத்துக்காட்டுகள்

1. சமமான சிறப்புத்தன்மை: சமீபத்திய விதி வெல்லும்

அதே விதி வெளிப்புற பாணி தாளில் (external style sheet) இருமுறை எழுதப்பட்டால், சமீபத்திய விதி வெல்லும்:

h1 {background-color: yellow;}
h1 {background-color: red;}

2. ID தேர்வாளர்கள் பண்புக்கூறு தேர்வாளர்களை விட சிறந்தவை

#myDiv {background-color: yellow;}
div[id=myDiv] {background-color: blue;}

💡 Jassif Team விளக்கம்:

முதல் விதிக்கு இரண்டாவதை விட அதிக சிறப்புத்தன்மை உள்ளது, எனவே அது பயன்படுத்தப்படும்.

3. ஒரு வகுப்பு தேர்வாளர் உறுப்பு தேர்வாளர்களை விட சிறந்தது

.intro {background-color: yellow;}
h1 {background-color: red;}

4. பொது தேர்வாளர் (*)

பொது தேர்வாளருக்கு (*) சிறப்புத்தன்மை எடை மதிப்பு இல்லை:

* {background-color: yellow;}
h1 {background-color: red;}

5. உள்ளிணைந்த பாணி தாள்கள் வெளிப்புற பாணி தாள்களை விட மிகவும் குறிப்பிட்டவை

உள்ளிணைந்த பாணி தாள் பாணி அமைக்கப்பட வேண்டிய உறுப்புக்கு மிக அருகில் உள்ளது:

/*வெளிப்புற CSS கோப்பில் இருந்து:*/
#content h1 {background-color: red;}

/*HTML கோப்பில்:*/
<style>
#content h1 {background-color: yellow;}
</style>

⚠️ முக்கிய குறிப்பு:

உள்ளிணைந்த பாணிகளை அதிகமாகப் பயன்படுத்துவதைத் தவிர்க்கவும், ஏனெனில் அவை பராமரிப்பை கடினமாக்குகின்றன மற்றும் !important விதிகளைத் தவிர அனைத்தையும் மேலெழுதுகின்றன.

சிறப்புத்தன்மையைக் கணக்கிடுதல்

சிறப்புத்தன்மையைக் கணக்கிடும் போது, ஒவ்வொரு தேர்வாளர் வகைக்கும் புள்ளிகளைச் சேர்க்கவும்:

தேர்வாளர் வகை	எடுத்துக்காட்டு	புள்ளிகள்	மொத்த சிறப்புத்தன்மை
உறுப்பு	p, div, h1	0-0-0-1	1
வகுப்பு	.container, .btn-primary	0-0-1-0	10
போலி-வகுப்பு	:hover, :first-child	0-0-1-0	10
ID	#header, #main-content	0-1-0-0	100
உள்ளிணைந்த பாணி	style="color: red;"	1-0-0-0	1000

கணக்கீட்டு எடுத்துக்காட்டுகள்:

#nav .item a:hover

ID: 1 = 100
வகுப்பு: 1 = 10
உறுப்பு: 1 = 1
போலி-வகுப்பு: 1 = 10
மொத்தம் = 121

div#main .content p

ID: 1 = 100
வகுப்பு: 1 = 10
உறுப்புகள்: 2 = 2
மொத்தம் = 112

body div p

உறுப்புகள்: 3 = 3
மொத்தம் = 3

CSS Specificity பயிற்சி

உங்கள் CSS சிறப்புத்தன்மை அறிவைச் சோதிக்க இந்த பயிற்சியை முயற்சிக்கவும்.

❓ பின்வருவனவற்றில் எதற்கு அதிகபட்ச சிறப்புத்தன்மை உள்ளது?

வகுப்பு தேர்வாளர் (Class selector)

✗ தவறு! வகுப்பு தேர்வாளருக்கு 0-0-1-0 எடை உள்ளது, இது அதிகபட்சம் அல்ல

உறுப்பு தேர்வாளர் (Element selector)

✗ தவறு! உறுப்பு தேர்வாளருக்கு 0-0-0-1 எடை உள்ளது, இது மிகக் குறைந்தது

ID தேர்வாளர் (ID selector)

✗ தவறு! ID தேர்வாளருக்கு 0-1-0-0 எடை உள்ளது, ஆனால் உள்ளிணைந்த பாணியை விட குறைவு

உள்ளிணைந்த பாணி (Inline style)

✓ சரி! உள்ளிணைந்த பாணிக்கு 1-0-0-0 எடை உள்ளது, இது CSS இல் அதிகபட்ச சிறப்புத்தன்மை ஆகும் (!important விதிகளைத் தவிர)

சுருக்கம்

சிறப்புத்தன்மை படிநிலை: உள்ளிணைந்த பாணி > ID > வகுப்பு/பண்புக்கூறு > உறுப்பு

சிறப்புத்தன்மை a-b-c-d வடிவத்தில் கணக்கிடப்படுகிறது, இங்கு a உள்ளிணைந்த பாணி, b ID கள், c வகுப்புகள், d உறுப்புகள்

சம சிறப்புத்தன்மை கொண்ட விதிகளில், கடைசியாக வரும் விதி வெல்லும்

குறைந்த சிறப்புத்தன்மை கொண்ட தேர்வாளர்களைப் பயன்படுத்தி, உங்கள் CSS ஐ மேம்படுத்த முடியும்

🎯 Jassif Team இறுதி உதவிக்குறிப்பு:

CSS சிறப்புத்தன்மையைப் புரிந்துகொள்வது திறமையான மற்றும் பராமரிக்கக்கூடிய CSS எழுத உதவுகிறது. நீங்கள் எப்போதுமே சாத்தியமான குறைந்த சிறப்புத்தன்மை கொண்ட தேர்வாளர்களைப் பயன்படுத்த முயற்சிக்க வேண்டும், ஏனெனில் இது மேலெழுதுவதை எளிதாக்குகிறது மற்றும் !important ஐத் தவிர்க்க உதவுகிறது.