ഉപയോഗിക്കുന്നത്: n തരത്തിലുള്ള തരം (n) പട്ടികകളുപയോഗിച്ച്
ടാർഗെറ്റുകൾ വായിക്കാൻ എളുപ്പമാക്കുന്നതിന്, പശ്ചാത്തല വർണ്ണങ്ങളൊപ്പം വ്യത്യസ്ത ശൈലികൾ ഉപയോഗിച്ച് ഇത് പലപ്പോഴും സഹായകമാകും. മറ്റ് എല്ലാ വരികളുടെയും പശ്ചാത്തല നിറം സജ്ജമാക്കുന്നതാണ് സ്റ്റൈൽ ടേബിളുകളിലെ സാധാരണ രീതികളിൽ ഒന്ന്. ഇത് പലപ്പോഴും "zebra strips" എന്ന് വിളിക്കുന്നു.
ഓരോ ക്ലാസും ഒരു CSS ക്ലാസ് ഉപയോഗിച്ച് സജ്ജമാക്കി അതിനുശേഷം ആ ക്ലാസ്സിൻറെ ശൈലി നിർവ്വചിച്ചുകൊണ്ട് നിങ്ങൾക്ക് ഇത് സാധ്യമാകും. ഇത് പ്രവർത്തിക്കുന്നു പക്ഷേ അതിനെക്കുറിച്ച് പോകാനുള്ള ഏറ്റവും മികച്ച അല്ലെങ്കിൽ കൂടുതൽ കാര്യക്ഷമമായ മാർഗ്ഗം അല്ല.
ഈ മാർഗം ഉപയോഗിക്കുമ്പോൾ, ഓരോ നിരയും മാറ്റങ്ങളുമായി പൊരുത്തപ്പെടുന്നുണ്ടെന്ന് ഉറപ്പുവരുത്തുന്നതിന് ഓരോ ടേബിളിൽ ഓരോ വരിയും തിരുത്തേണ്ടി വരുമ്പോൾ ആ പട്ടിക നിങ്ങൾ എഡിറ്റ് ചെയ്യണം. ഉദാഹരണത്തിന്, നിങ്ങൾ നിങ്ങളുടെ പട്ടികയിൽ ഒരു പുതിയ വരി ചേർക്കുന്നെങ്കിൽ, അതിന്റെ താഴെയുള്ള മറ്റെല്ലാ വരികളും ക്ലാസ് മാറ്റേണ്ടതുണ്ട്.
സിബ്സ് സ്ട്രിപ്പുകളുപയോഗിച്ച് സ്റ്റൈൽ പട്ടികകൾ എളുപ്പമാക്കുന്നു. ഏതെങ്കിലും അധിക HTML ആട്രിബ്യൂട്ടുകൾ അല്ലെങ്കിൽ CSS ക്ലാസ്സുകൾ ചേർക്കേണ്ട ആവശ്യമില്ല, നിങ്ങൾ ഇപ്പോൾ ഉപയോഗിക്കുന്നത്: nth-of-type (n) CSS സെലക്ടർ .
Nth-of-type (n) സെലക്ടർ എന്നത് CSS- ൽ ഒരു ഘടനാപരമായ ക്ലാസ് ആണ്, അത് മാതാപിതാക്കളോടും സാന്നിധ്യമുള്ള ഘടകങ്ങളോടും അവരുടെ ബന്ധത്തെ അടിസ്ഥാനമാക്കിയാണ് ശൈലി മൂലകങ്ങളെ അനുവദിക്കുന്നത്. നിങ്ങൾക്ക് അവയുടെ ഉറവിടം അടിസ്ഥാനമാക്കി ഒന്നോ അതിലധികമോ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിന് ഉപയോഗിക്കാൻ കഴിയും. മറ്റൊരു വാക്കിൽ, ഒരു പാരന്റ് തരം ഒരു പ്രത്യേക തരം ഒമ്പതാമത്തെ കുഞ്ഞിന്റെ എല്ലാ ഘടകങ്ങളുമായും ഇത് പൊരുത്തപ്പെടുത്താൻ കഴിയും.
ഒരു അക്ഷരം n ഒരു കീവേഡിലാകാം (ഉദാ: odd or even), ഒരു സംഖ്യ അല്ലെങ്കിൽ ഒരു ഫോർമുല.
ഉദാഹരണമായി, ഒരു മഞ്ഞ പശ്ചാത്തല നിറത്തിലുള്ള മറ്റ് എല്ലാ ഖണ്ഡിക ശൈലികളെയും ശൈലിയിൽ, നിങ്ങളുടെ CSS പ്രമാണത്തിൽ ഉൾപ്പെടുത്തും:
p: nth-of-type (ഇരട്ട) {
പശ്ചാത്തലം: മഞ്ഞ;
}
നിങ്ങളുടെ HTML പട്ടിക ഉപയോഗിച്ച് ആരംഭിക്കുക
ആദ്യം, നിങ്ങളുടെ പട്ടിക ഉണ്ടാക്കുക സാധാരണയായി HTML ൽ എഴുതുക. വരികളോ നിരകളോ ഒന്നും പ്രത്യേക ക്ലാസ്സുകൾ ചേർക്കരുത്.
നിങ്ങളുടെ ശൈലിയിൽ, ഇനിപ്പറയുന്ന CSS ചേർക്കുക:
tr: nth-of-type (ഇരട്ട) {
പശ്ചാത്തല വർണം: #ccc;
}
ആദ്യ വരിയിൽ തുടങ്ങുന്ന ചാര പശ്ചാത്തല വർണ്ണമുള്ള മറ്റേതൊരു വരിയും ഇത് ചെയ്യും.
ഒരേ രീതിയിൽ സ്റ്റൈൽ ആൾട്ടർനാഷിങ് കോളങ്ങൾ
നിങ്ങളുടെ പട്ടികയിൽ നിരകളിലേക്കുള്ള സ്റ്റൈലിംഗിനെ സമാന തരത്തിലുള്ളതാക്കാൻ കഴിയും. അങ്ങനെ ചെയ്യുന്നതിന്, നിങ്ങളുടെ CSS ക്ലാസ്സിൽ t ക്ക് t ളെ മാറ്റുക. ഉദാഹരണത്തിന്:
td: nth-of-type (ഒറ്റസംഖ്യ)
പശ്ചാത്തല വർണം: #ccc;
}
ഒരു nth-of-type (n) സെലക്ടറിൽ സൂത്രവാക്യങ്ങൾ ഉപയോഗിക്കുന്നു
സെലക്ടറിൽ ഉപയോഗിക്കുന്ന ഒരു ഫോർമുലയുടെ സിന്റാക്സ് ഒരു + b ആണ്.
സൈക്കിൾ അല്ലെങ്കിൽ ഇൻഡെക്സ് വ്യാപ്തിയെ പ്രതിനിധീകരിക്കുന്ന ഒരു സംഖ്യയാണ്.
n എന്നത് യഥാർത്ഥത്തിൽ "n" എന്ന അക്ഷരമാണ്, 0-ൻ നക്ഷത്രങ്ങളുള്ള ഒരു കൌണ്ടറിനെ പ്രതിനിധാനം ചെയ്യുന്നു.
+ "-" ആകാവുന്ന ഒരു ഓപ്പറേറ്റർ,
b ഒരു പൂർണ്ണസംഖ്യയാണെന്നും ഓഫ്സെറ്റ് മൂല്ല്യം പ്രതിനിധീകരിക്കുന്നു-ഉദാഹരണമായി, എത്ര വരികൾ താഴേയ്ക്കുള്ള പോയിന്റർ പശ്ചാത്തല വർണ്ണം പ്രയോഗിക്കാൻ തുടങ്ങണം. ഒരു ഓപ്പറേറ്റർ ഫോർമുലയിൽ ഉൾപ്പെടുത്തിയാൽ ഇത് ആവശ്യമാണ്.
ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഓരോ 3 കരിയുടേയും പശ്ചാത്തല വർണ്ണം സജ്ജീകരിക്കണമെങ്കിൽ, നിങ്ങളുടെ ഫോർമുല 3n + 0 ആയിരിക്കും. നിങ്ങളുടെ CSS ഇതുപോലെ ആയിരിക്കാം:
tr: nth-of-type (3n + 0) {
പശ്ചാത്തലം: slategray;
}
Nth-type-type സെലക്ടർ ഉപയോഗിക്കുന്നതിനുള്ള സഹായകരമായ ഉപകരണങ്ങൾ
നിങ്ങൾ വ്യാജ-ക്ലാസ് nth-in-type സെലക്ടർ ഉപയോഗിക്കുന്നതിനുള്ള സൂത്രവാക്യം ഉപയോഗിച്ച് അല്പം മുട്ടുമ്പോൾ, പരീക്ഷിക്കുക: നിങ്ങൾ ആഗ്രഹിക്കുന്ന കാഴ്ച നേടാൻ വാക്യഘടന നിർവചിക്കുന്നതിന് സഹായകമാകുന്ന ഒരു പ്രയോജനപ്രദമായ ഉപകരണമായി nth പരീക്ഷക സൈറ്റ് ഉപയോഗിക്കുക. Nth-of-type തിരഞ്ഞെടുക്കുന്നതിന് ഡ്രോപ്ഡൌൺ മെനു ഉപയോഗിക്കുക (നിങ്ങൾ ഇവിടെ മറ്റ് കപട ക്ലാസ്സുകളുമൊത്ത് പരീക്ഷണാർത്ഥം പരീക്ഷിച്ചുനോക്കാം).