ഒരു CSS ക്ലാസ്സുകൾ സെലക്ടർ എന്താണ്?

ഒരു HTML പ്രമാണത്തിന്റെ ഘടന ഒരു കുടുംബ വൃക്ഷത്തിന് സമാനമാണ്. നിങ്ങളുടെ കുടുംബത്തിൽ നിങ്ങളുടെ മാതാപിതാക്കളും നിങ്ങളുടെ മുൻപിൽ വന്ന മറ്റുള്ളവരുമുണ്ട്. ഇവ നിങ്ങളുടെ പൂർവ്വികർ. കുട്ടികളും, നിന്റെ പിന്നാലെ വരുന്നവരും നിന്റെ സന്താനമാണ്. സമാന ശൈലിയിൽ HTML പ്രവർത്തിക്കുന്നു. മറ്റു മൂലകങ്ങളുടെ ഉള്ളിലുള്ള മൂലകങ്ങൾ അവരുടെ പിൻഗാമികളാണ്. ഉദാഹരണത്തിന്, ഏതാണ്ട് എല്ലാ HTML ഘടകങ്ങളും റ്റാഗുകൾക്കുള്ളിൽ ഉള്ളതിനാൽ, അവ ഘടകങ്ങളുടെ ഒരു വാഴ്ചയായിരിക്കും. നിങ്ങൾ CSS- ൽ പ്രവർത്തിക്കാൻ തുടങ്ങുമ്പോൾ ഈ ബന്ധം വളരെ പ്രധാനമാണ്, ഒപ്പം ദൃശ്യ ശൈലികൾ പ്രയോഗിക്കുന്നതിന് പ്രത്യേക ഘടകങ്ങളെ ലക്ഷ്യം വയ്ക്കുകയും വേണം.

CSS താഴ്ന്ന സെലക്ടർമാർ

മറ്റൊരു എലമെൻറിൽ (അല്ലെങ്കിൽ കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ, മറ്റൊരു മൂലകത്തിന്റെ പിന്തുടർച്ചയുള്ള മൂലകത്തിന്) ഒരു CSS പരമ്പര സെലക്ടർ പ്രയോഗിക്കുന്നു. ഉദാഹരണത്തിന്, ക്രമരഹിത പട്ടികയിൽ ഒരു ടാഗ് ഉണ്ട്, ടാഗുകൾ സന്താനങ്ങളായാണ്. ഒരു ഉദാഹരണമായി ഇനിപ്പറയുന്ന HTML ഉപയോഗിക്കുക:

• ഇത് ഒരു ലിങ്കാണ്

  എൽഎ ടാഗുകൾ UL ടാഗിന്റെ പിന്തുടർച്ചക്കാരാണ്. LI (കുട്ടിയുടെ സന്തതിപരമ്പര), UL (കൊച്ചുമക്കളുടെ പിൻഭാഗം) എന്നീ രണ്ട് ടാഗുകളുടെ ഒരു സന്തതിയാണ് ഒരു ടാഗ്. കുടുംബ വൃക്ഷത്തെപ്പറ്റിയുള്ള ആശയം നിങ്ങൾ ചിന്തിക്കുകയാണെങ്കിൽ,

  മാതാപിതാക്കളായിരിക്കും,
  • ആ ഘടകത്തിന്റെ കുട്ടിയായിരിക്കുകയും >
  • കുട്ടിയുടെ പേരക്കുട്ടിയും
    .

    അപ്പോൾ ഈ പരമ്പര സെലക്ടറുകളുപയോഗിച്ച് ഒരു വെബ് പേജിൽ പ്രത്യേക ഘടകങ്ങൾ എങ്ങനെ ടാർഗെറ്റുചെയ്യും? ആദ്യം, നിങ്ങൾ സ്പേസ് ഉപയോഗിച്ച് വേർതിരിച്ച് രണ്ടു (അല്ലെങ്കിൽ കൂടുതൽ) ടൈപ് സെലക്ടറുകൾ ഉപയോഗിച്ച് പാരമ്പര്യ സെലക്ടർമാരെ നിർവ്വചിക്കുക.

    li a {ടെക്സ്റ്റ്-അലങ്കരിക്കൽ: ഒന്നുമില്ല; }

    ഈ ഉദാഹരണത്തിൽ, ഒരു ലിസ്റ്റ്-ഇനം ഘടകം (

    • ) ന്റെ പിന്തുടർച്ച എന്ന ലിങ്ക് ഘടകം () മാത്രമേ പ്രയോഗിക്കുകയുള്ളൂ. ഒരു ലിസ്റ്റ് ഇനത്തിന്റെ സന്താനമല്ലാത്ത പേജ് മറ്റ് എല്ലാ ലിങ്കുകളും ഈ രീതിയിൽ ലഭിക്കില്ല.

      ഓർമിക്കാൻ ഒരു പ്രധാനകാര്യം നിങ്ങളുടെ പിൻഗാമിയായ സെലക്ടറിൽ ഉപയോഗിക്കുന്ന ടാഗുകൾക്കിടയിൽ എത്ര ടാഗുകൾ ഉണ്ടെന്നത് പ്രശ്നമല്ല എന്നതാണ്. ആദ്യത്തെ മൂലകത്തിലെ എവിടെയെങ്കിലും രണ്ടാമത്തെ ഘടകം പരിധിയിലാണെങ്കിൽ, അത് ഒരു സന്തതിയായി തിരഞ്ഞെടുക്കും.

      ഉൽ ഘടകങ്ങളിൽ നിന്നു വരുന്ന എല്ലാ ആങ്കറുകളും നിങ്ങൾ തെരഞ്ഞെടുക്കാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, നിങ്ങൾ എഴുതുന്നു:

      ഉൽ ഒരു {ടെക്സ്റ്റ്-അലങ്കരിക്കൽ: ഒന്നുമില്ല; }

      ഇപ്പോൾ, ഈ ശൈലികൾ ഒരു ലിസ്റ്റ് ഇനത്തിന്റെ പിൻഗാമി ആയ ഏതൊരു ലിങ്കിനും ബാധകമായിരിക്കും. നിങ്ങൾക്ക് ഈ സെലക്ടർ എഴുതാം

      ul li a {ടെക്സ്റ്റ്-അലങ്കരിക്കൽ: ഒന്നുമില്ല; }

      ഇത് രണ്ടു തരം രണ്ട് സെലക്ടറുകളിലുപയോഗിക്കുന്ന ഒരു പരമ്പര സെലക്ടറാണ്. ഈ സാഹചര്യത്തിൽ, ഇത് പട്ടിക-ഇനത്തിനുള്ളിൽ ഉള്ളതും അതിർത്തിയില്ലാത്ത പട്ടികയിൽ ഉൾപ്പെടുന്നതുമായ ലിങ്കുകൾക്ക് ബാധകമായിരിക്കും.

      ക്ലാസ് സെലക്ടറുകളും ഐഡി സെലക്ടറുകളും ഉപയോഗിക്കുന്നു

      നിങ്ങൾ ഇറങ്ങിവരുന്ന സെലക്ടർമാർ എല്ലായ്പ്പോഴും ടൈപ്പുചെയ്യുന്നവരായിരിക്കണം. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് "ബിൽബോർഡ്" എന്നതിന്റെ ഒരു ഐഡി ആട്രിബ്യൂട്ട് ഉള്ള സൈറ്റിന്റെ ഒരു ഭാഗം (ഒരു ഡിവിഷൻ പോലെ) ഉണ്ടെന്ന് കരുതുക. ആ ID- യുടെ പിൻഗാമി സെലക്ടർ നിങ്ങൾക്ക് സജ്ജീകരിക്കാം:

      #billboard ul {background-color: #ccc; }

      ഇത് "ബിൽബോർഡ്" എന്നതിന്റെ ഒരു ID ഉള്ള ഒരു ഘടകത്തിന്റെ ഉൽപ്പത്തി എന്ന് ക്രമമില്ലാതെ ക്രമീകരിച്ചിട്ടുള്ള ലിസ്റ്റാണ്. നിങ്ങൾക്ക് ക്ലാസ് മൂല്യങ്ങൾക്ക് ഒരേപോലെ ചെയ്യാൻ കഴിയും.

      div.billboard ul {background-color: #ccc; }

      ഡിവിഷനിലെ "ബില്ബോര്ഡിന്റെ" ക്ലാസ് മൂല്യമുണ്ട് എന്ന് ഇത് ഊഹിക്കുന്നു. മുകളിലുള്ള CSS ഈ ക്ലാസ് മൂല്യമുള്ള ഏത് ഡിവിഷനിലും ഉള്ള

      മൂലകമാണ്.

      നിങ്ങൾക്ക് വാസ്തവത്തിൽ കനത്ത കൈയ്യും വെർബോസും ശ്രേണിയിൽ തിരഞ്ഞെടുക്കപ്പെട്ടവരുമായി ലഭിക്കും. ഉദാഹരണത്തിന്, നിങ്ങൾ നിങ്ങളുടെ HTML കോഡ് എഴുതാൻ ഡ്രീംവൈവറാണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, നിങ്ങൾ പുതിയ CSS നിയമങ്ങൾ ചേർക്കുമ്പോൾ ഒരു ക്രമീകരണം ഉണ്ട്, അത് ആ പേജിൽ നിങ്ങളുടെ കഴ്സറിന്റെ സ്ഥാനം അടിസ്ഥാനമാക്കി സെലക്ടർ യാന്ത്രികമായി സൃഷ്ടിക്കും. ഈ അവസരങ്ങളിൽ ഡ്രീംവെവർ എന്തുചെയ്യുന്നുവെന്നത് ഒരു മഹത്തായ വെർബോസും ദീർഘമായ ഒരു പിൻഗാമിയുമാണ്. നിങ്ങളുടെ CSS പ്രവർത്തിക്കുന്നതിന് വളരെ പ്രത്യേക ആവശ്യമില്ല. നിങ്ങൾ എന്ത് ചെയ്യണമെന്നാണ്, ഒരു സെലക്ടന്റ് സെലക്ടറിനുമിടയിലുള്ള ഒരു ബാലൻസ് കണ്ടെത്തുന്നത്, അങ്ങനെ നിങ്ങൾക്കാവശ്യമുള്ള കൃത്യമായ ഘടകങ്ങളിലേക്ക് ഡ്രോപ്പ് ചെയ്യാൻ കഴിയും (Cascading Style Sheets without Cascading Options) വലിയ.