CSS ஸ்பெசிஃபிசிட்டி கால்குலேட்டர்
இரண்டு CSS விதிகள் ஒரே எலிமெண்டை இலக்காகக் கொண்டு, ஒரே பண்பை (property) அமைக்கும்போது, பிரவுசர் ஒரு வெற்றியாளரைத் தேர்வு செய்ய வேண்டும். இந்த முடிவு specificity (குறிப்பிட்டத்தன்மை) மூலம் எடுக்கப்படுகிறது — இது ஸ்டைல்ஷீட்டில் எழுதப்பட்ட வரிசையால் அல்ல, பயன்படுத்தப்பட்ட செலக்டர்களின் வகைகளால் கணக்கிடப்படும் ஸ்கோர் (வரிசை இறுதி டை-பிரேக்கராக மட்டுமே முக்கியம்). இந்த கால்குலேட்டர் ஒன்று அல்லது அதற்கு மேற்பட்ட CSS செலக்டர்களை எடுத்து ஒவ்வொன்றின் ஸ்பெசிஃபிசிட்டியையும் கணக்கிடுகிறது, இதனால் எந்த விதி உண்மையில் பொருந்தும் என்பதை ஒரே பார்வையில் காணலாம்.
ஸ்பெசிஃபிசிட்டி எப்படி கணக்கிடப்படுகிறது
ஸ்பெசிஃபிசிட்டி என்பது மூன்று எண்ணிக்கைகளின் தொகுப்பு, பொதுவாக (a, b, c) என எழுதப்படும்:
- a — ID செலக்டர்களின் எண்ணிக்கை (
#header) - b — கிளாஸ் செலக்டர்கள், அட்ரிபியூட் செலக்டர்கள், pseudo-classes ஆகியவற்றின் எண்ணிக்கை (
.button,[type="text"],:hover,:nth-child(2)) - c — டைப் (எலிமெண்ட்) செலக்டர்கள், pseudo-elements ஆகியவற்றின் எண்ணிக்கை (
div,a,::before)
செலக்டர்கள் இடமிருந்து வலமாக, நெடுவரிசை நெடுவரிசையாக ஒப்பிடப்படுகின்றன: அதிக a உள்ள செலக்டர் எப்போதும் வெல்லும், b அல்லது c எதுவாக இருந்தாலும்; a சமமாக இருக்கும்போது மட்டுமே b முடிவு செய்யும்; a, b இரண்டும் சமமாக இருக்கும்போது மட்டுமே c முடிவு செய்யும். ஸ்பெசிஃபிசிட்டி தசம எண் அல்ல — (0, 1, 0), (0, 0, 99) ஐ மறுபக்கத்தில் எத்தனை எலிமெண்ட் செலக்டர்கள் இருந்தாலும் வெல்லும், ஏனெனில் ஒப்பீடு ஒருபோதும் நெடுவரிசைகளுக்கு இடையே கேரி ஆகாது.
சில செலக்டர்கள் சிறப்பு நிகழ்வுகள்:
- யுனிவர்சல் செலக்டர் (
*), காம்பினேட்டர்கள் (இடைவெளி,>,+,~) எந்த நெடுவரிசையிலும் எதையும் சேர்க்காது. :where(...)எப்போதும் (0, 0, 0) தரும், அதற்குள் என்ன இருந்தாலும் — ஸ்பெசிஃபிசிட்டியைச் சேர்க்காமல் செலக்டர் லாஜிக்கைச் சேர்க்கவே இது வடிவமைக்கப்பட்டுள்ளது.:is(...),:not(...),:has(...)ஆகியவை அவற்றின் மிகவும் குறிப்பிட்ட ஒற்றை ஆர்குமென்டின் ஸ்பெசிஃபிசிட்டியை வழங்கும் (அனைத்தின் கூட்டுத்தொகை அல்ல).- இன்லைன்
style="..."அட்ரிபியூட்கள் மற்றும்!importantபிரகடனங்கள் சாதாரண ஸ்பெசிஃபிசிட்டியை முழுமையாக மீறும்; இந்த கால்குலேட்டர் ஸ்டைல்ஷீட்டில் எழுதப்பட்ட செலக்டர்களை மட்டுமே ஒப்பிடுகிறது.
உதாரண கணக்கீடு
#nav .item:hover ஐ header nav ul li a உடன் ஒப்பிடுவோம்:
#nav .item:hover→ 1 ID (#nav), 2 கிளாஸ்/pseudo-class (.item,:hover), 0 எலிமெண்ட் → (1, 2, 0)header nav ul li a→ 0 ID, 0 கிளாஸ், 5 எலிமெண்ட் (header,nav,ul,li,a) → (0, 0, 5)
இரண்டாவது செலக்டரில் ஐந்து எலிமெண்ட் பெயர்கள் இணைக்கப்பட்டிருந்தாலும், முதல் செலக்டர் தெளிவாக வெல்கிறது — ஒரு ID செலக்டர் எத்தனை டைப் செலக்டர்களையும் விட மேலோங்கும்.
இந்த கால்குலேட்டரை எப்படி பயன்படுத்துவது
- உரைப் பெட்டியில் ஒன்று அல்லது அதற்கு மேற்பட்ட CSS செலக்டர்களை ஒட்டவும், ஒவ்வொரு வரியிலும் ஒன்று (அல்லது கமாவால் பிரிக்கப்பட்டு, உண்மையான ஸ்டைல்ஷீட்டில் உள்ளதைப் போல).
- ஒவ்வொரு செலக்டரின் ID / கிளாஸ் / எலிமெண்ட் எண்ணிக்கை, அதன் ஸ்பெசிஃபிசிட்டி, ஒட்டுமொத்தமாக எந்த செலக்டர் வெல்கிறது என்பதைக் காட்டும் அட்டவணையைக் காண Calculate ஐ கிளிக் செய்யவும்.
- "என் CSS விதி ஏன் செயல்படவில்லை?" போன்ற சிக்கல்களைச் சரிசெய்யவும், ஏற்கனவே உள்ள ஒரு விதியை மீற புதிய விதி எவ்வளவு குறிப்பிட்டதாக இருக்க வேண்டும் எனத் தீர்மானிக்கவும், பின்னர் மீறுவதற்குக் கடினமான அளவுக்கு அதிக ஸ்பெசிஃபிக் செலக்டர்களுக்காக ஒரு ஸ்டைல்ஷீட்டை மதிப்பாய்வு செய்யவும் இதைப் பயன்படுத்தவும்.