CSS സ്പെസിഫിസിറ്റി കാൽക്കുലേറ്റർ

CSS സ്പെസിഫിസിറ്റി കാൽക്കുലേറ്റർ

ഒരേ എലമെന്റിനെ രണ്ട് CSS റൂളുകൾ ടാർഗെറ്റ് ചെയ്ത് ഒരേ പ്രോപ്പർട്ടി സെറ്റ് ചെയ്യുമ്പോൾ, ബ്രൗസർ ഒരു വിജയിയെ തിരഞ്ഞെടുക്കണം. ഈ തീരുമാനം എടുക്കുന്നത് specificity (നിർദ്ദിഷ്ടത) അനുസരിച്ചാണ് — സ്റ്റൈൽഷീറ്റിൽ എഴുതിയ ക്രമമല്ല, ഉപയോഗിച്ച സെലക്ടറുകളുടെ തരമാണ് ഈ സ്കോർ നിർണ്ണയിക്കുന്നത് (ക്രമം അവസാന ടൈ-ബ്രേക്കർ ആയി മാത്രം ബാധകമാകുന്നു). ഈ കാൽക്കുലേറ്റർ ഒന്നോ അതിലധികമോ CSS സെലക്ടറുകൾ എടുത്ത് ഓരോന്നിന്റെയും സ്പെസിഫിസിറ്റി കണക്കാക്കുന്നു, അതിനാൽ ഏത് റൂൾ യഥാർത്ഥത്തിൽ പ്രാബല്യത്തിൽ വരുമെന്ന് ഒറ്റനോട്ടത്തിൽ കാണാം.

സ്പെസിഫിസിറ്റി എങ്ങനെ കണക്കാക്കുന്നു

സ്പെസിഫിസിറ്റി മൂന്ന് എണ്ണങ്ങളുടെ ഒരു ട്രിപ്പിൾ ആണ്, സാധാരണയായി (a, b, c) എന്ന് എഴുതുന്നു:

$$specificity = (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 സെലക്ടർ എത്ര ടൈപ്പ് സെലക്ടറുകൾക്കും മുകളിലാണ്.

ഈ കാൽക്കുലേറ്റർ എങ്ങനെ ഉപയോഗിക്കാം

1. ടെക്സ്റ്റ് ബോക്സിൽ ഒന്നോ അതിലധികമോ CSS സെലക്ടറുകൾ പേസ്റ്റ് ചെയ്യുക, ഓരോ വരിയിലും ഒന്ന് (അല്ലെങ്കിൽ കോമയിട്ട് വേർതിരിച്ച്, യഥാർത്ഥ സ്റ്റൈൽഷീറ്റിലേത് പോലെ).
2. ഓരോ സെലക്ടറിന്റെയും ID / ക്ലാസ് / എലമെന്റ് എണ്ണം, അതിന്റെ സ്പെസിഫിസിറ്റി, മൊത്തത്തിൽ ഏത് സെലക്ടർ ജയിക്കുന്നു എന്നിവ കാണിക്കുന്ന ടേബിൾ കാണാൻ Calculate ക്ലിക്ക് ചെയ്യുക.
3. "എന്റെ CSS റൂൾ എന്തുകൊണ്ട് പ്രാബല്യത്തിൽ വരുന്നില്ല?" എന്ന പ്രശ്നങ്ങൾ പരിഹരിക്കാനും, നിലവിലുള്ള ഒരു റൂളിനെ മറികടക്കാൻ പുതിയ റൂളിന് എത്ര സ്പെസിഫിക് ആകണമെന്ന് തീരുമാനിക്കാനും, പിന്നീട് മറികടക്കാൻ ബുദ്ധിമുട്ടുള്ള അമിതമായി നിർദ്ദിഷ്ടമായ സെലക്ടറുകൾക്കായി ഒരു സ്റ്റൈൽഷീറ്റ് പരിശോധിക്കാനും ഇത് ഉപയോഗിക്കുക.