എന്താണ് CSS സെലക്ടർ മനസിലാക്കുക

CSS ആരംഭിച്ചു

ഏത് ശൈലിയിൽ പ്രമാണത്തിൽ ഏത് ഘടകമാണ് ഉപയോഗിക്കുന്നത് എന്ന് നിർണ്ണയിക്കുന്നതിന് പാറ്റേൺ പൊരുത്തപ്പെടാനുള്ള നിയമങ്ങളെ അടിസ്ഥാനപ്പെടുത്തിയാണ് CSS . ഈ പാറ്റേണുകൾ സെലക്ടറുകളായും അവ ടാഗുകളുടെ പേരുകളായും (ഉദാഹരണത്തിന്, പി ഖണ്ഡിക ടാഗുകൾ പൊരുത്തപ്പെടുത്തുക) ഒരു പ്രമാണത്തിലെ വളരെ പ്രത്യേക ഭാഗങ്ങളുമായി പൊരുത്തപ്പെടുന്ന സങ്കീർണ്ണ പാറ്റേണുകൾ വരെ കാണിക്കുന്നു (ഉദാഹരണത്തിന്, p # myid> b.ighlight ഒരു ബാഗുമായി പാരായണത്തിന്റെ ഒരു കുട്ടി എന്ന ഹൈലൈറ്റ് ക്ലാസ്സ് ഐഡിയിൽ മൈൻഡ് ചെയ്തതാണ്).

ഒരു CSS സെലക്ടർ ആണ് CSS സ്റ്റൈൽ കോളിന്റെ ഭാഗമായി വെബ് പേജിലെ ഏത് ഭാഗമാണ് ശൈലിയിലുള്ളതെന്ന് വ്യക്തമാക്കുക. തിരഞ്ഞെടുക്കപ്പെട്ട HTML എങ്ങനെ ശൈലിയിൽ നിർവചിക്കണമെന്ന് നിർവചിക്കുന്ന ഒന്നോ അതിലധികമോ പ്രോപ്പർട്ടികൾ സെലക്ടർയിൽ അടങ്ങിയിരിക്കുന്നു.

എസ്എസ്എസ് സെലക്ടര്മാര്

വ്യത്യസ്ത തരം സെലക്ടറുകളുണ്ട്:

• ഒരു പ്രത്യേക ഘടകത്തെ അനുയോജ്യമായ സെലക്ടറുകളായി ടൈപ്പുചെയ്യുക
• ക്ലാസ് സെലക്ടർമാർ-പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ ഒരു പ്രത്യേക ക്ലാസ്
• ഐഡി സെലക്ടർമാർ-ഒരു പ്രത്യേക ഐഡി ഉപയോഗിച്ച് ഘടകം യോജിക്കുന്നു
• ഒരു പ്രത്യേക മൂലകത്തിന്റെ പിന്തുടർച്ചയുള്ള മടക്കപ്പെടുന്ന മൂലകങ്ങൾ
• ഒരു പ്രത്യേക ഘടകത്തിന്റെ കുട്ടിയുടേതായ ബോക്സ് സെലക്ടർമാർ-പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ
• സാർവത്രിക സെലക്ടറുകളുപയോഗിച്ച് യോജിക്കുന്നു
• തൊട്ടടുത്തുള്ള സാന്നിദ്ധ്യം സെലക്ടറുകൾ-പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ ഒരു പ്രത്യേക ഘടകത്തിന് തൊട്ടുമുമ്പ്
• ഒരു പ്രത്യേക ആട്രിബ്യൂട്ട് അല്ലെങ്കിൽ ആട്രിബ്യൂട്ട് മൂല്യമുള്ള സെലക്ടറുകളുമായി പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ ആട്രിബ്യൂട്ട് ചെയ്യുക
• ഒരു പ്രത്യേക കഷണത്തോടുകൂടിയ സ്യൂട്ട് ക്ലാസ് സെലക്ടറുകൾ-പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ
• പ്രത്യേക കപട-ഘടക ഘടകം ഉള്ള സ്യൂട്ട്-എലമെൻറ് സെലക്ടേഴ്സറുകൾ-പൊരുത്തപ്പെടുന്ന ഘടകങ്ങൾ

CSS സ്റ്റൈലുകളും CSS സെലക്ടറുകളും ഫോർമാറ്റ് ചെയ്യുക

ഒരു CSS രീതിയുടെ ശൈലി ഇതുപോലെയാണ്:

സെലക്ടർ {style property: style; }

കോമകളുമായി ഒരേ ശൈലിയിലുള്ള ഒന്നിലധികം സെലക്ടറുകളെ വേർതിരിക്കുക. ഇത് സെലക്ടർ ഗ്രൂപ്പിംഗ് എന്ന് വിളിക്കുന്നു. ഉദാഹരണത്തിന്:

സെലക്ടർ 1 , സെലക്ടർ 2 {സ്റ്റൈൽ സ്വത്ത്: ശൈലി; }

നിങ്ങളുടെ CSS ശൈലികൾ കോംപാക്റ്റായി നിലനിർത്തുന്നതിനുള്ള ഒരു ഹ്രസ്വ സംവിധാനമാണ് ഗ്രൂപ്പിംഗ് സെലക്ടറുകൾ.

മുകളിലുള്ള കൂട്ടിച്ചേർക്കൽ അതേപോലെ തന്നെ പ്രവർത്തിക്കുന്നു:

selector1 {style property: style; }
selector2 {style property: style; }

നിങ്ങളുടെ CSS സെലക്ടറുകളെ എപ്പോഴും പരീക്ഷിക്കുക

എല്ലാ CSS സെലക്ടറുകളേയും എല്ലാ ബ്രൗസറുകളും പിന്തുണയ്ക്കില്ല. അതിനാൽ നിങ്ങൾക്ക് പല ഓപ്പറേറ്റിങ് സിസ്റ്റങ്ങളിൽ ധാരാളം ബ്രൗസറുകളായി നിങ്ങളുടെ സെലക്ടർമാരെ പരീക്ഷിക്കാൻ കഴിയുമെന്ന് ഉറപ്പാക്കുക. എന്നാൽ നിങ്ങൾ CSS 1 അല്ലെങ്കിൽ CSS2 സെലക്ടറുകളാണെങ്കിൽ നിങ്ങൾ നന്നായിരിക്കണം.