CSS స్పెసిఫిసిటీ కాలిక్యులేటర్
రెండు CSS రూల్స్ ఒకే ఎలిమెంట్ని టార్గెట్ చేసి, ఒకే ప్రాపర్టీని సెట్ చేసినప్పుడు, బ్రౌజర్ ఒక విజేతను ఎంచుకోవాలి. ఈ నిర్ణయం 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 రూల్ ఎందుకు వర్తించడం లేదు?" వంటి సమస్యలను పరిష్కరించడానికి, ఇప్పటికే ఉన్న రూల్ను అధిగమించడానికి కొత్త రూల్ ఎంత నిర్దిష్టంగా ఉండాలో నిర్ణయించడానికి, లేదా తర్వాత అధిగమించడం కష్టమైన మరీ నిర్దిష్టమైన సెలెక్టర్ల కోసం స్టైల్షీట్ను సమీక్షించడానికి దీన్ని ఉపయోగించండి.