കണക്കാക്കാനും കഴിയും, അതിൻ്റെ ഓർഡിനൽ നമ്പർ മൂന്നാമത്തേതാണ് (അതിൻ്റെ മാതാപിതാക്കളുടെ മൂന്നാമത്തെ കുട്ടി ). ഈ ഘടകങ്ങളെ സ്റ്റൈൽ ചെയ്യാൻ ഞങ്ങൾ ഒരു കപട ക്ലാസ് ഉപയോഗിക്കേണ്ടതുണ്ട് :ഒമ്പതാം-കുട്ടി.

നമുക്ക് ഒരു ഉദാഹരണത്തിലേക്ക് പോകാം:

ബോഡി ടാഗിൻ്റെ ആദ്യ h2 തലക്കെട്ട്

• ഒന്ന്
• രണ്ട്
• മൂന്ന്

ബോഡി ടാഗിൻ്റെ രണ്ടാമത്തെ h2 തലക്കെട്ട്

:ഒമ്പതാം-കുട്ടിഞങ്ങൾ ഘടകങ്ങൾ സ്റ്റൈൽ ചെയ്തു

ഒപ്പം

, അവയുടെ മാതൃ ഘടകങ്ങളിൽ ഒരു പ്രത്യേക ഓർഡിനൽ ചൈൽഡ് എലമെൻ്റ് ഉണ്ട്.

ഞങ്ങളുടെ ഉദാഹരണത്തിൻ്റെ ഫലം:

കീവേഡ് ഉപയോഗിച്ച് സ്റ്റൈലിംഗ്

ഒരു കപട-ക്ലാസ് മൂല്യമായി :ഒമ്പതാം കുട്ടി()ഇതിൽ സ്റ്റൈൽ ചെയ്യേണ്ട ചൈൽഡ് എലമെൻ്റുകളുടെ ഓർഡിനൽ എണ്ണം മാത്രമല്ല, ഘടകങ്ങളുടെ മുഴുവൻ ഗ്രൂപ്പിനെയും നിർവചിക്കാൻ കഴിയുന്ന കീവേഡുകളും ഉൾപ്പെടുത്താം. കീവേഡിനായി നിങ്ങൾക്ക് രണ്ട് മൂല്യങ്ങൾ ഉപയോഗിക്കാം:

• പോലും (ഘടകങ്ങൾ പോലും)
• ഒറ്റ (വിചിത്ര ഘടകങ്ങൾ)

കീവേഡുകൾ ഉപയോഗിച്ചുള്ള സ്റ്റൈലിംഗ് ഘടകങ്ങൾക്ക് വളരെ വിപുലമായ ആപ്ലിക്കേഷനുകളുണ്ട്, കാരണം നിങ്ങൾക്ക് ഒരു ഡോക്യുമെൻ്റിലെ ഇരട്ട അല്ലെങ്കിൽ വിചിത്ര ഘടകങ്ങൾ എളുപ്പത്തിൽ തിരഞ്ഞെടുക്കാനും സ്റ്റൈൽ ചെയ്യാനും കഴിയും.

ഉദാഹരണമായി വ്യത്യസ്ത ശൈലിയിലുള്ള ക്ലാസുകളുള്ള രണ്ട് ലളിതമായ പട്ടികകൾ സൃഷ്ടിക്കുകയും കപട-ക്ലാസ് കീവേഡ് മൂല്യങ്ങളുടെ ഉപയോഗത്തിലെ വ്യത്യാസം ദൃശ്യവൽക്കരിക്കുകയും ചെയ്യാം. :ഒമ്പതാം-കുട്ടി HTML ഘടകത്തിന് ഇത് ഒരു പട്ടിക നിരയെ നിർവചിക്കുന്നു:

തുല്യ മൂല്യം (പോലും)

1 വരി	സ്ഥാനം	അളവ്
2 വരി
3 വരി
4 വരി
5 വരി

ഒറ്റമൂല്യം

1 വരി	സ്ഥാനം	അളവ്
2 വരി
3 വരി
4 വരി
5 വരി

ഈ ഉദാഹരണത്തിൽ സ്യൂഡോ ക്ലാസ് ഉപയോഗിക്കുന്നു :ഒമ്പതാം കുട്ടി()ഞങ്ങൾ സ്റ്റൈലൈസ് ചെയ്തു പോലുംആദ്യ പട്ടികയുടെ വരികൾ (ഘടകങ്ങൾ ) ഒപ്പം വിചിത്രമായരണ്ടാമത്തെ പട്ടികയിൽ.

ലളിതമായ ഒരു ഗണിത സൂത്രവാക്യം ഉപയോഗിച്ച് സ്റ്റൈലിംഗ്

കപട-വർഗം :ഒമ്പതാം കുട്ടി()ഒരു നിശ്ചിത സീരിയൽ നമ്പറുള്ള ഇരട്ട, ഒറ്റ അല്ലെങ്കിൽ ചൈൽഡ് ഘടകങ്ങൾ മാത്രമല്ല, പ്രാഥമിക ഗണിത സൂത്രവാക്യം വ്യക്തമാക്കിയ ചൈൽഡ് ഘടകങ്ങളും തിരഞ്ഞെടുക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇനിപ്പറയുന്ന സെലക്ടർ നോക്കാം, ഈ എൻട്രി എന്താണ് അർത്ഥമാക്കുന്നത് എന്ന് മനസ്സിലാക്കാം:

td:nth-child(4n+2)

) ലൈനിനുള്ളിൽ, രണ്ടാമത്തെ പട്ടിക സെല്ലിൽ നിന്ന് ആരംഭിക്കുന്നത്, സ്റ്റൈലൈസ് ചെയ്യും:

• 4n- ഓരോ നാലാമത്തെ മൂലകവും.
• 2

സൂത്രവാക്യങ്ങളിൽ, ഒരു കുറയ്ക്കൽ ചിഹ്നം ഉപയോഗിച്ച് മൂല്യങ്ങൾ ഉപയോഗിക്കാൻ കഴിയും, എന്നാൽ ഇത് സാധാരണയായി ആവശ്യമില്ല:

ടിഡി:മത്-കുട്ടി(4n-1)(പശ്ചാത്തല നിറം: ഇളംനീല; /* പശ്ചാത്തല നിറം സജ്ജമാക്കുക */)

ഈ സെലക്ടർ അർത്ഥമാക്കുന്നത് ഓരോ നാലാമത്തെ ടേബിൾ സെല്ലും ( ) നിരയ്ക്കുള്ളിൽ, പട്ടികയുടെ മൂന്നാമത്തെ സെല്ലിൽ നിന്ന് ആരംഭിക്കുന്നു (വസ്തുനിഷ്ഠമായ കാരണങ്ങളാൽ -1 സെല്ലില്ല, അതിനാൽ ഇടത്തേക്ക് ഒരു ഷിഫ്റ്റ് ഉണ്ട്), സ്റ്റൈലൈസ് ചെയ്യും:

• 4n- ഓരോ നാലാമത്തെ മൂലകവും.
• -1 - ഏത് ഘടകത്തിൽ നിന്നാണ് ആരംഭിക്കേണ്ടത്.

ഒരു ഉദാഹരണ ഉപയോഗം നോക്കാം:

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

ഈ ഉദാഹരണത്തിൽ, pseudo-class:nth-child ഉപയോഗിച്ച്, ഞങ്ങൾ ഓരോ നാലാമത്തെ ടേബിൾ സെല്ലും തിരഞ്ഞെടുത്ത് സ്റ്റൈൽ ചെയ്തിട്ടുണ്ട് ( ) വരിയുടെ ഉള്ളിൽ, രണ്ടാമത്തെ പട്ടിക സെല്ലിൽ നിന്ന് ആരംഭിക്കുന്നു. ഞങ്ങളുടെ ഉദാഹരണത്തിൻ്റെ ഫലം:

Basicweb.ru

CSS nth-child സെലക്ടർ എങ്ങനെ പ്രവർത്തിക്കുന്നു

CSS-ൽ ഒരു സെലക്ടർ ഉണ്ട്, കൂടുതൽ കൃത്യമായി പറഞ്ഞാൽ nth-child എന്ന് വിളിക്കപ്പെടുന്ന ഒരു കപട സെലക്ടർ. അതിൻ്റെ ഉപയോഗത്തിൻ്റെ ഒരു ഉദാഹരണം:

Ul li:nth-child(3n+3) ( നിറം: #ccc; )

മുകളിലുള്ള CSS ഇനിപ്പറയുന്നവ ചെയ്യുന്നു: ഓർഡർ ചെയ്യാത്ത ലിസ്റ്റിലെ എല്ലാ മൂന്നാമത്തെ ഇനത്തിലും സ്റ്റൈലിംഗ് പ്രയോഗിക്കുക. അതായത് 3, 6, 9, 12, മുതലായവ. എന്നാൽ ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു? കൂടാതെ, nth-child ഉപയോഗിക്കുന്നതിലൂടെ എന്ത് നേട്ടങ്ങൾ നേടാനാകും?

പരാൻതീസിസിലെ പദപ്രയോഗത്തിലാണ് പ്രധാന അർത്ഥം. nth-child രണ്ട് കീവേഡുകൾ സ്വീകരിക്കുന്നു: പോലും(പോലും) കൂടാതെ വിചിത്രമായ(വിചിത്രം). അവയുടെ അർത്ഥം തികച്ചും വ്യക്തമാണ്. ഇരട്ട ഘടകങ്ങൾ (2, 4, 6) തിരഞ്ഞെടുക്കുന്നു, ഒറ്റത്തവണ ഒറ്റമൂലകങ്ങൾ തിരഞ്ഞെടുക്കുന്നു (1, 3, 5).

മുകളിലെ ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ, nth-child-ന് എക്സ്പ്രഷനുകൾ പ്രോസസ്സ് ചെയ്യാൻ കഴിയും. സാധ്യമായ ഏറ്റവും ലളിതമായ പദപ്രയോഗം എന്താണ്? ഒരു നമ്പർ മാത്രം. നിങ്ങൾ ബ്രാക്കറ്റിൽ ഏതെങ്കിലും നമ്പർ എഴുതുകയാണെങ്കിൽ, ഒരൊറ്റ ഘടകം തിരഞ്ഞെടുക്കപ്പെടും. ഉദാഹരണത്തിന്, പട്ടികയിലെ അഞ്ചാമത്തെ ഘടകം നമുക്ക് തിരഞ്ഞെടുക്കാം:

Ul li:nth-child(5) (നിറം: #ccc; )

(3n+3) എന്ന പദപ്രയോഗം ഉപയോഗിച്ച നമ്മുടെ ആദ്യ ഉദാഹരണത്തിലേക്ക് നമുക്ക് മടങ്ങാം. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു? എന്തുകൊണ്ടാണ് ഇത് ഓരോ മൂന്നാമത്തെ ഘടകവും തിരഞ്ഞെടുക്കുന്നത്? മുഴുവൻ പോയിൻ്റും n എന്ന വേരിയബിളിലാണ്. ഇത് പൂജ്യത്തിൽ നിന്നും അതിനുമുകളിലുള്ള പൂർണ്ണസംഖ്യ മൂല്യങ്ങൾ സ്വീകരിക്കുന്നു. നമുക്ക് സൂക്ഷ്മമായി നോക്കാം:

(3 x 0) + 3 = 3 = 3-ആം മൂലകം (3 x 1) + 3 = 6 = 6-ാമത്തെ ഘടകം (3 x 2) + 3 = 9 = 9-ാമത്തെ മൂലകം മുതലായവ.

ഇനി നമുക്ക് ഇനിപ്പറയുന്ന പദപ്രയോഗം പരീക്ഷിക്കാം: nth-child(2n+1) :

(2 x 0) + 1 = 1 = 1st ഘടകം (2 x 1) + 1 = 3 = 3rd ഘടകം (2 x 2) + 1 = 5 = 5th ഘടകം മുതലായവ.

തൽഫലമായി, വിചിത്രമായ കാര്യത്തിലെ അതേ കാര്യം ഞങ്ങൾക്ക് ലഭിച്ചു, അതിനാൽ അത്തരമൊരു പദപ്രയോഗം പലപ്പോഴും ഉപയോഗിക്കേണ്ടതില്ല. മാത്രമല്ല, യഥാർത്ഥ പദപ്രയോഗത്തിന് (3n+3), എക്സ്പ്രഷൻ (3n) പകരം ഞങ്ങളുടെ ആദ്യ ഉദാഹരണം ലളിതമാക്കാനും ഉപയോഗിക്കാനും കഴിയും:

(3 x 0) + 0 = 0 = പൊരുത്തമില്ല (3 x 1) + 0 = 3 = 3rd ഘടകം (3 x 2) + 0 = 6 = 6-ാമത്തെ മൂലകം മുതലായവ.

നിങ്ങൾക്ക് കാണാനാകുന്നതുപോലെ, ഫലം ഒന്നുതന്നെയാണ്, എന്നാൽ നിങ്ങൾ "+3" എഴുതേണ്ടതില്ല. എക്സ്പ്രഷനിൽ നമുക്ക് നെഗറ്റീവ് മൂല്യങ്ങളും ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, 4n-1:

(4 x 0) - 1 = -1 = പൊരുത്തമില്ല (4 x 1) - 1 = 3 = 3rd ഘടകം (4 x 2) - 1 = 7 = 7-ാമത്തെ മൂലകം മുതലായവ.

n ൻ്റെ ഗുണകത്തിന് നെഗറ്റീവ് മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നത് അൽപ്പം വിചിത്രമായി തോന്നുന്നു, കാരണം ഫലം നെഗറ്റീവ് ആണെങ്കിൽ, ഒരു പൊരുത്തവും കണ്ടെത്താനാവില്ല. പോസിറ്റീവ് ഘടകങ്ങൾ ചേർക്കുന്നതിന് നിങ്ങൾ എക്‌സ്‌പ്രഷൻ നിരന്തരം മാറ്റേണ്ടതുണ്ട്. ഇത് മാറുന്നതുപോലെ, ആദ്യത്തെ n ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിന് ഈ സമീപനം വളരെ സൗകര്യപ്രദമാണ്. "-n+3" ഉള്ള ഒരു ഉദാഹരണം നോക്കാം:

0 + 3 = 3 = 3-ആം ഘടകം -1 + 3 = 2 = 2-ആം ഘടകം -2 + 3 = 1 = ആദ്യ ഘടകം -3 + 3 = 0 = പൊരുത്തമില്ല

ക്രോസ് ബ്രൗസർ അനുയോജ്യത

nth-child എന്നത് നിർഭാഗ്യകരമായ ആട്രിബ്യൂട്ടുകളിൽ ഒന്നാണ്, ഇത് പൂർണ്ണമായും ക്രോസ് ബ്രൗസറാണ്, IE-യിലെ കേവല പൂജ്യം ഒഴികെ, പതിപ്പ് 8 പോലും. അതിനാൽ, ഇത് ഉപയോഗിക്കുമ്പോൾ, പ്രതീക്ഷിക്കുന്ന ഫലം ഏതെങ്കിലും തരത്തിലുള്ള വിഷ്വൽ ഇഫക്റ്റ് ആണെങ്കിൽ (ഉദാഹരണത്തിന്, ഒരു നിശ്ചിത പട്ടികയുടെ വരികൾ കളറിംഗ്), ഇതാണ് അനുയോജ്യമായ സമീപനം. പക്ഷേ, ഒരുപക്ഷേ, ലേഔട്ടിൻ്റെ കൃത്യതയെ ബാധിച്ചേക്കാവുന്ന കൂടുതൽ പ്രധാനപ്പെട്ട എന്തെങ്കിലും നിങ്ങൾ ഇത് ഉപയോഗിക്കരുത്.

തീർച്ചയായും, നിങ്ങൾ jQuery ഉപയോഗിക്കുകയാണെങ്കിൽ, നിങ്ങൾ ഇതിനെക്കുറിച്ച് വിഷമിക്കേണ്ടതില്ല, കാരണം jQuery ഇൻ്റർനെറ്റ് എക്സ്പ്ലോററിൽ പോലും പ്രവർത്തിക്കുന്നു.

ഒടുവിൽ

ഉദാഹരണ പേജിൽ നിങ്ങൾക്ക് വ്യത്യസ്ത സെലക്ടർ എക്സ്പ്രഷനുകൾ ഉപയോഗിച്ച് പ്ലേ ചെയ്യാം.

www.css-tricks.ru

മൂല്യങ്ങൾ

അർത്ഥം	വിവരണം
നമ്പർ	1 മുതൽ ആരംഭിക്കുന്ന ഒരു പോസിറ്റീവ് നമ്പർ. നമ്മൾ ആക്സസ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഘടകത്തിൻ്റെ എണ്ണം വ്യക്തമാക്കുന്നു. മൂലകങ്ങളുടെ എണ്ണം 1 മുതൽ ആരംഭിക്കുന്നു.
വിചിത്രമായ	വിചിത്ര ഘടകങ്ങൾ.
പോലും	ഘടകങ്ങൾ പോലും.
എക്സ്പ്രഷൻ	എല്ലാ പൂർണ്ണസംഖ്യകളെയും സൂചിപ്പിക്കുന്ന n എന്ന അക്ഷരം ഉപയോഗിച്ച് നിങ്ങൾക്ക് പ്രത്യേക പദപ്രയോഗങ്ങൾ സൃഷ്ടിക്കാൻ കഴിയും പൂജ്യം (ഒന്നിൽ നിന്നല്ല!)പരസ്യം അനന്തമായി. അതിനാൽ, 2n എന്നാൽ എല്ലാ ഇരട്ട സംഖ്യകളും (രണ്ടാമത്തെ മുതൽ ആരംഭിക്കുന്നു) എന്നാണ് അർത്ഥമാക്കുന്നത്. ഇത് എങ്ങനെ മനസ്സിലാക്കാം? ഞങ്ങൾ 0 മുതൽ n വരെയുള്ള സംഖ്യകളെ തുടർച്ചയായി മാറ്റിസ്ഥാപിക്കുന്നു: n = 0 ആണെങ്കിൽ, 2n 0 നൽകും - അത്തരം ഘടകമൊന്നുമില്ല ( 1 മുതൽ ആരംഭിക്കുന്ന മൂലകങ്ങളുടെ എണ്ണം!), n = 1 ആണെങ്കിൽ, 2n 2 നൽകുന്നു - രണ്ടാമത്തെ ഘടകം, n = 2 ആണെങ്കിൽ, 2n 4 നൽകുന്നു - നാലാമത്തെ ഘടകം. നിങ്ങൾ 3n എഴുതുകയാണെങ്കിൽ, അത് ഓരോ മൂന്നാമത്തെ ഘടകവും ആയിരിക്കും (മൂന്നാമത്തേതിൽ നിന്ന് ആരംഭിക്കുന്നു!), തുടങ്ങിയവ.

ഉദാഹരണങ്ങൾ

ഉദാഹരണം

ഈ ഉദാഹരണത്തിൽ, നമ്മൾ ചുവപ്പ് നിറം li ആക്കും, അതായത് നാലാമത്തെ പിൻഗാമിഅതിൻ്റെ രക്ഷിതാവ് (ഓളിനുള്ളിൽ നാലാമത്തേത്):

കോഡ് നടപ്പിലാക്കുന്നതിൻ്റെ ഫലം:

ഉദാഹരണം

ഇനി എല്ലാം ചുവപ്പ് ആക്കാം പോലുംലി:

കോഡ് നടപ്പിലാക്കുന്നതിൻ്റെ ഫലം:

ഉദാഹരണം

ഇനി എല്ലാം ചുവപ്പ് ആക്കാം വിചിത്രമായലി:

കോഡ് നടപ്പിലാക്കുന്നതിൻ്റെ ഫലം:

ഉദാഹരണം

ഇനി ചുവപ്പ് ആക്കാം ഓരോ മൂന്നാമത്തെയും li (മൂന്നാമത്തേത് മുതൽ):

കോഡ് നടപ്പിലാക്കുന്നതിൻ്റെ ഫലം:

ഉദാഹരണം

സെലക്ടർക്ക് ഘടകങ്ങളുടെ ഒരു ശ്രേണി വ്യക്തമാക്കാൻ കഴിയും. നിങ്ങൾക്ക് 20 ഘടകങ്ങളുടെ ഒരു ലിസ്റ്റ് ഉണ്ടെന്നും 7 മുതൽ 14 വരെയുള്ള ഘടകങ്ങൾ നിങ്ങൾ തിരഞ്ഞെടുക്കണമെന്നും പറയാം. നിങ്ങൾക്ക് ഇത് ഇതുപോലെ ചെയ്യാൻ കഴിയും:

കോഡ് നടപ്പിലാക്കുന്നതിൻ്റെ ഫലം:

code.mu

വാക്യഘടന

പൊരുത്തപ്പെടുന്ന ഘടകങ്ങളുടെ പാറ്റേണിനെ പ്രതിനിധീകരിക്കുന്ന ഒരൊറ്റ ആർഗ്യുമെൻ്റ് ഉപയോഗിച്ച് nth-child pseudo-class വ്യക്തമാക്കിയിരിക്കുന്നു.

കീവേഡ് മൂല്യങ്ങൾ

odd എന്നത് സഹോദരങ്ങളുടെ ഒരു പരമ്പരയിലെ സംഖ്യാ സ്ഥാനം ഒറ്റപ്പെട്ട ഘടകങ്ങളെ പ്രതിനിധീകരിക്കുന്നു: 1, 3, 5, മുതലായവ.

2, 4, 6, മുതലായവ, സഹോദരങ്ങളുടെ ഒരു പരമ്പരയിലെ സംഖ്യാ സ്ഥാനം തുല്യമായ ഘടകങ്ങളെ പോലും പ്രതിനിധീകരിക്കുന്നു.

ഫങ്ഷണൽ നൊട്ടേഷൻ n ൻ്റെ ഓരോ പോസിറ്റീവ് പൂർണ്ണസംഖ്യയ്ക്കും പൂജ്യം മൂല്യത്തിനും വേണ്ടി, സഹോദരങ്ങളുടെ ഒരു പരമ്പരയിലെ സംഖ്യാ സ്ഥാനം An+B പാറ്റേണുമായി പൊരുത്തപ്പെടുന്ന ഘടകങ്ങളെ പ്രതിനിധീകരിക്കുന്നു. ആദ്യ മൂലകത്തിൻ്റെ സൂചിക 1 ആണ്. എ, ബി മൂല്യങ്ങൾ രണ്ടും ആയിരിക്കണം

എസ്.

ഔപചാരിക വാക്യഘടന :ഒമ്പതാം കുട്ടി( ]?)

[ഓഫ്
= എവിടെ
=

[ഓഫ്
=

[ഓഫ്
=
= ">" " " "~" " "

[ഓഫ്
=

വിവരണം

വിചിത്രമായ പോലും

വാക്യഘടന

എലമെൻ്റ് ട്രീയിലെ നമ്പറിംഗിനെ അടിസ്ഥാനമാക്കി എലമെൻ്റുകളിലേക്ക് ശൈലി ചേർക്കാൻ :nth-child pseudo-class ഉപയോഗിക്കുന്നു.<число> | <выражение>) {...}

മൂല്യങ്ങൾ

മൂലകം: nth-child(വിചിത്രം | ഇരട്ട |

ഒറ്റത്തവണ എല്ലാ ഒറ്റമൂലക സംഖ്യകളും.

എല്ലാ ഇരട്ട അക്കമിട്ട ഘടകങ്ങളും പോലും.

നമ്പർ കുട്ടിയുടെ മൂലകത്തിൻ്റെ ഓർഡിനൽ നമ്പർ അതിൻ്റെ മാതാപിതാക്കളുമായി ബന്ധപ്പെട്ടതാണ്. നമ്പറിംഗ് 1 മുതൽ ആരംഭിക്കുന്നു, ഇത് ലിസ്റ്റിലെ ആദ്യ ഘടകമായിരിക്കും.

എക്സ്പ്രഷൻ an+b ആയി നൽകിയിരിക്കുന്നു, ഇവിടെ a, b എന്നിവ പൂർണ്ണസംഖ്യകളാണ്, കൂടാതെ n എന്നത് 0, 1, 2 മൂല്യം സ്വയമേവ എടുക്കുന്ന ഒരു കൗണ്ടറാണ്...

	2134	2135	2136	2137	2138
നെഗറ്റീവ് എ, ബി മൂല്യങ്ങൾ ഉപയോഗിക്കുന്നതിലൂടെ, ചില ഫലങ്ങൾ നെഗറ്റീവ് അല്ലെങ്കിൽ പൂജ്യം ആയിരിക്കാം. എന്നിരുന്നാലും, മൂലക സംഖ്യകൾ 1 ൽ ആരംഭിക്കുന്നതിനാൽ മൂലകങ്ങളെ പോസിറ്റീവ് മൂല്യങ്ങൾ മാത്രമേ ബാധിക്കുകയുള്ളൂ.	16	34	62	74	57
പട്ടികയിൽ 1 സാധ്യമായ ചില എക്സ്പ്രഷനുകളും കീവേഡുകളും കാണിക്കുന്നു, കൂടാതെ ഏത് എലമെൻ്റ് നമ്പറുകളാണ് ഉപയോഗിക്കേണ്ടതെന്നും സൂചിപ്പിക്കുന്നു.	4	69	72	56	47
HTML5 CSS3 IE Cr Op Sa Fx	7	73	79	34	86
nth-കുട്ടി	23	34	88	53	103

എണ്ണ

സ്വർണ്ണം

മരം

കല്ലുകൾ

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

എൻ്റെ ബ്ലോഗിലേക്ക് ഞാൻ നിങ്ങളെ സ്വാഗതം ചെയ്യുന്നു. CSS-ലെ ആദ്യത്തെ പാരൻ്റ് ഘടകം എങ്ങനെ തിരഞ്ഞെടുക്കാം എന്ന വിഷയത്തിൽ ഇന്ന് ഞാൻ എഴുതാൻ ആഗ്രഹിക്കുന്നു, കാരണം ഇത് കുറച്ച് സ്റ്റൈൽ ക്ലാസുകൾ ഉപയോഗിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.

കപട-ക്ലാസ്സുകൾ: ആദ്യ കുട്ടിയും ആദ്യത്തെ തരത്തിലുള്ളതും, എന്താണ് വ്യത്യാസം?
CSS-ലെ പാരൻ്റ് കണ്ടെയ്‌നറിൽ നിന്ന് ആദ്യ ഘടകം ആക്‌സസ് ചെയ്യുന്നതിനായി, രണ്ട് വ്യാജ ക്ലാസുകൾ കണ്ടുപിടിച്ചു. ഒരു ഉദാഹരണം ഉപയോഗിച്ച് എല്ലാം നോക്കാൻ ഞാൻ ഉടൻ നിർദ്ദേശിക്കുന്നു, അതുവഴി നിങ്ങൾക്ക് മനസ്സിലാകും:
}

ഇതൊരു ഖണ്ഡികയാണ്

നമുക്ക് ഇനിപ്പറയുന്ന മാർക്ക്അപ്പ് ഉണ്ടെന്ന് പറയാം. ആദ്യ പാരഗ്രാഫ് എടുത്ത് ക്ലാസുകൾ ചേർക്കാതെ മറ്റുള്ളവയിൽ നിന്ന് വേറിട്ട് സ്റ്റൈൽ ചെയ്യുകയാണ് ലക്ഷ്യം. ഇത് ഇതുപോലെ ചെയ്യാൻ കഴിയും:
#റാപ്പർ പി:ആദ്യ കുട്ടി(
}

അതുതന്നെ സംഭവിക്കും. അപ്പോൾ എന്താണ് വ്യത്യാസം? ആദ്യ-തരം കപട-ക്ലാസ് മാതാപിതാക്കളുടെ ആദ്യ ഘടകം തിരയുകയും കണ്ടെത്തുകയും ചെയ്യുന്നു, അതിൻ്റെ തരം കണക്കിലെടുക്കുന്നു, ആദ്യ കുട്ടി ഒന്നും അന്വേഷിക്കുന്നില്ല - ഇത് ലളിതമായി അതിൻ്റെ ആദ്യ ഘടകം എടുക്കുന്നു വരുന്ന രക്ഷിതാവ്, അതൊരു ഖണ്ഡികയാണെങ്കിൽ, അതിന് ശൈലികൾ പ്രയോഗിക്കുന്നു. ഇല്ലെങ്കിൽ, ഒന്നും തിരഞ്ഞെടുക്കുകയോ പ്രയോഗിക്കുകയോ ചെയ്യില്ല.

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഈ ഉദാഹരണത്തിൽ, പട്ടികയുടെ ആദ്യ വരിയുടെ ശൈലി മാറ്റുന്നതിനും അതുപോലെ എല്ലാ ഇരട്ട വരികളും ഹൈലൈറ്റ് ചെയ്യുന്നതിനും :nth-child pseudo-class ഉപയോഗിക്കുന്നു (ചിത്രം 1).

ഇപ്പോൾ ചിന്തിക്കുക: ഈ കേസിൽ ഫസ്റ്റ് ഓഫ് ടൈപ്പ് പ്രവർത്തിക്കുമോ? അതെ, കാരണം ഇത് മൂലകത്തിൻ്റെ തരം കണക്കിലെടുക്കുകയും ആദ്യ ഖണ്ഡിക തിരഞ്ഞെടുക്കുകയും ചെയ്യും, എല്ലാ ഘടകങ്ങളിലും ആദ്യത്തേതല്ല. ആദ്യ കുട്ടി പ്രവർത്തിക്കുമോ? ഒന്നു ശ്രമിച്ചു നോക്കൂ. ഖണ്ഡിക മാതാപിതാക്കളിലെ ആദ്യ ഘടകമല്ലാത്തതിനാൽ ഇത് പ്രവർത്തിക്കില്ല.

വ്യക്തിപരമായി, ഈ കപട ക്ലാസുകൾ തമ്മിലുള്ള വ്യത്യാസം എനിക്ക് പെട്ടെന്ന് മനസ്സിലായില്ല, കുറച്ച് സമയത്തേക്ക് ആശയക്കുഴപ്പത്തിലായിരുന്നു, എന്നാൽ ഇപ്പോൾ, ഞാൻ അത് നിങ്ങളോട് ശരിയായി വിശദീകരിച്ചുവെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

മറ്റൊരു പ്രധാന വിശദാംശം

മൂലകങ്ങൾ കൃത്യമായി കണക്കാക്കുന്നത് പാരൻ്റ് എലമെൻ്റിൽ നിന്നാണ്, അതിനാൽ നിങ്ങൾ ഇത് ഇതുപോലെ വ്യക്തമാക്കിയാൽ:

ലി:ആദ്യ-തരം(
…
}

തുടർന്ന് ബോഡി ടാഗിലെ ആദ്യ ലിസ്റ്റ് ഇനങ്ങൾ തിരഞ്ഞെടുക്കപ്പെടും (അതായത്, മുഴുവൻ പേജിലും). അതിനാൽ, ഏത് ലിസ്റ്റിലും ആദ്യ ഇനം വ്യത്യസ്തമായി ഫോർമാറ്റ് ചെയ്യപ്പെടും.
നിങ്ങൾ ഇതുപോലെ എഴുതുകയാണെങ്കിൽ:

#സൈഡ്‌ബാർ ലി:ആദ്യ-ഓഫ്-തരം(
…
}

അപ്പോൾ സൈഡ്‌ബാറിലെ ലിസ്റ്റുകളുടെ ആദ്യ ഇനങ്ങൾ മാത്രമേ തിരഞ്ഞെടുക്കൂ, അതായത്, ഞങ്ങളുടെ വെബ്‌സൈറ്റിലെ സൈഡ് കോളം.

ഞാൻ എഴുതിയ വിവിധ സെലക്ടറുകൾ ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ഒരു വെബ് പേജിലെ മിക്കവാറും എല്ലാ ഘടകങ്ങളിലും എത്തിച്ചേരാനാകും. css-ൽ nth-child pseudo-class-ൽ എങ്ങനെ പ്രവർത്തിക്കാം എന്നതിനെക്കുറിച്ച് ഈ ലേഖനത്തിൽ നിങ്ങൾക്ക് കൂടുതൽ വായിക്കാം, കൂടാതെ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിനുള്ള ഓപ്ഷനുകൾ ഇത് നിങ്ങൾക്ക് നൽകുന്നു.

വഴിയിൽ, എതിർ കപട ക്ലാസുകളെ പരാമർശിക്കാൻ ഞാൻ മറന്നു - അവസാന കുട്ടി (യഥാക്രമം അവസാനത്തെ തരം). പാരൻ്റ് കണ്ടെയ്‌നറിൽ നിന്ന് അവസാന ഘടകം തിരഞ്ഞെടുക്കാൻ അവ നിങ്ങളെ അനുവദിക്കുന്നു.

നിങ്ങൾക്ക് ഇത് പ്രായോഗികമായി എവിടെ ഉപയോഗിക്കാം

css ഉപയോഗിച്ച് കോഡിംഗ് ചെയ്യുമ്പോൾ അവ സജീവമായി ഉപയോഗിക്കുന്നതിനാൽ ഞാൻ ഈ കപട ക്ലാസുകളെക്കുറിച്ച് എഴുതുന്നു. നിങ്ങളുടെ പേജിൽ, ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് സമാനമായ പോസ്റ്റുകളോ കമൻ്റുകളോ മറ്റെന്തെങ്കിലും ബ്ലോക്കോ ഉണ്ട്. എങ്ങനെയെങ്കിലും അതിൻ്റെ ആദ്യ ഘടകം ഒരു പ്രത്യേക രീതിയിൽ രൂപകൽപ്പന ചെയ്യാനുള്ള ആശയം നിങ്ങൾക്കുണ്ടായിരുന്നു. അല്ലെങ്കിൽ അവസാനത്തേത്. പൊതുവേ, ആർക്കും സാധ്യമാണ്.

ആവശ്യമുള്ള ഘടകം സംഭരിച്ചിരിക്കുന്ന ബ്ലോക്കിൻ്റെ പേര് നിങ്ങൾ കണ്ടെത്തേണ്ടതുണ്ട്. ഞങ്ങൾ ജനപ്രിയ പോസ്റ്റുകൾ കൈകാര്യം ചെയ്യുന്നുവെന്ന് പറയാം. പാരൻ്റ് കണ്ടെയ്‌നറിന് ജനപ്രിയമായ ഒരു ക്ലാസ് ഉണ്ട്. അപ്പോൾ ഞങ്ങൾ ഇതുപോലെ എഴുതുന്നു:

ജനപ്രിയ ലി: ആദ്യ തരം(
പാഡിംഗ് ടോപ്പ്: 20px;
}

അത്രയേയുള്ളൂ, അതിലെ ആദ്യ ലിസ്റ്റ് ഇനത്തിന് മുകളിൽ ഒരു ഇൻഡൻ്റേഷൻ ലഭിച്ചു, എന്നാൽ നിങ്ങൾക്ക് ആവശ്യമുള്ളത് സ്റ്റൈലിലേക്ക് ചേർക്കാം.

ഇതാ മറ്റൊരു ഉദാഹരണം. ബോഡി ടാഗിൽ എനിക്ക് സമാനമായ മൂന്ന് ഗ്രേ ബ്ലോക്കുകൾ മാത്രമേയുള്ളൂ. ഇങ്ങനെ എഴുതാം.

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

Tr:nth-child (odd) ( // പശ്ചാത്തല നിറം ) tr: nth-child (പോലും) ( // മറ്റൊരു പശ്ചാത്തല നിറം )

മറ്റൊരു കപട-ക്ലാസ്: nth-child നിങ്ങളെ ഒരു പൊതു പ്രോപ്പർട്ടി ഉള്ള ഘടകങ്ങളെ ഗ്രൂപ്പുകളായി വിഭജിക്കാൻ അനുവദിക്കുന്നു, തുടർന്ന് ഇനിപ്പറയുന്ന വാക്യഘടന ഉപയോഗിച്ച് ഓരോ ഗ്രൂപ്പിൽ നിന്നും ഒരു പ്രത്യേക ഘടകം തിരഞ്ഞെടുക്കുക:

Tr:nth-child (an+b) ( )

ഇവിടെ എഗ്രൂപ്പിലെ ഘടകങ്ങളുടെ എണ്ണം നിർണ്ണയിക്കുന്നു, കൂടാതെ ബിഗ്രൂപ്പിൽ നിന്ന് ഏത് ഘടകം തിരഞ്ഞെടുക്കണമെന്ന് നിർണ്ണയിക്കുന്നു. നിങ്ങൾ മൂല്യം ഉപയോഗിക്കുകയാണെങ്കിൽ 2n+1, തുടർന്ന് ഘടകങ്ങൾ രണ്ട് ഗ്രൂപ്പുകളായി വിഭജിക്കപ്പെടും, ഓരോ ഗ്രൂപ്പിൻ്റെയും ആദ്യ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കപ്പെടും, അതായത്, ഒറ്റ സീരിയൽ നമ്പറുള്ള ഘടകങ്ങൾ. നിങ്ങൾ മൂല്യം ഉപയോഗിക്കുകയാണെങ്കിൽ 2n+2, തുടർന്ന് ഘടകങ്ങൾ വീണ്ടും രണ്ട് ഗ്രൂപ്പുകളായി വിഭജിക്കപ്പെടും, എന്നാൽ ഇപ്പോൾ ഓരോ ഗ്രൂപ്പിൻ്റെയും രണ്ടാമത്തെ ഘടകങ്ങൾ തിരഞ്ഞെടുക്കപ്പെടും, അതായത്, ഇരട്ട സീരിയൽ നമ്പറുള്ള ഘടകങ്ങൾ.

കപട-ക്ലാസ്: nth-child മനസ്സിലാക്കുന്നതിനുള്ള മറ്റൊരു ഉദാഹരണമായി, ഓരോ നാലാമത്തെ മൂലകവും തിരഞ്ഞെടുക്കാൻ ഞങ്ങൾ ഇത് ഉപയോഗിക്കും, അതായത്, നാലാമത്, എട്ടാമത്, പന്ത്രണ്ടാമത്, പതിനാറാം, മുതലായവ. ഇത് ചെയ്യുന്നതിന്, ഞങ്ങൾ ഘടകങ്ങളെ നാലിൻ്റെ ഗ്രൂപ്പുകളായി വിഭജിക്കും. തുടർന്ന് ഓരോ നാലാമത്തെ ഘടകവും തിരഞ്ഞെടുക്കുക.

Tr:nth-child (4n+4) ( // ഓരോ നാലാമത്തെ ഘടകത്തിനും ശൈലികൾ സജ്ജമാക്കുക)

പത്ത് ഘടകങ്ങളുടെ ഒരു ലിസ്റ്റ് ചുവടെയുണ്ട്, ഞങ്ങൾ ഹൈലൈറ്റ് ചെയ്യാൻ ആഗ്രഹിക്കുന്ന ഘടകങ്ങൾ തിരഞ്ഞെടുക്കുന്നതിന് ഞങ്ങൾ :nth-child, :fist-child, :last-child pseudo-classes ഉപയോഗിക്കും.

ഒരൊറ്റ ഘടകം തിരഞ്ഞെടുക്കാൻ CSS: nth-child pseudo-class ഉപയോഗിക്കുന്നു

pseudo-class:nth-child ഒരു സംഖ്യയായി ഒരു മൂല്യം നൽകുന്നതിലൂടെ, ഗ്രൂപ്പിലെ ഏത് കുട്ടിയെ ആക്‌സസ് ചെയ്യണമെന്ന് നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#സെലക്‌ടർ_ഉദാഹരണം ലി:ഒന്നാം കുട്ടി (4) (ഫോണ്ട്-സൈസ്: 150

ആദ്യത്തെ അഞ്ച് ഒഴികെയുള്ള എല്ലാ ഘടകങ്ങളും തിരഞ്ഞെടുക്കാൻ CSS: nth-child pseudo-class ഉപയോഗിക്കുന്നു

നിങ്ങൾ pseudo-class:nth-child-ന് ഫോമിൻ്റെ മൂല്യം നൽകിയാൽ n+നമ്പർ, ഈ സീരിയൽ നമ്പർ ഉപയോഗിച്ച് എലമെൻ്റിൽ തുടങ്ങുന്ന എല്ലാ ഘടകങ്ങളും നിങ്ങൾക്ക് തിരഞ്ഞെടുക്കാം:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#തിരഞ്ഞെടുപ്പ്_ഉദാഹരണം li:nth-child (n+6 ) ( font-size: 150 %;

ആദ്യത്തെ അഞ്ച് ഘടകങ്ങൾ മാത്രം തിരഞ്ഞെടുക്കാൻ CSS: nth-child pseudo-class ഉപയോഗിക്കുന്നു

നമ്മൾ pseudo-class:nth-child നെ നെഗറ്റീവ് മൂല്യത്തിലേക്ക് സജ്ജീകരിക്കുമ്പോൾ n+നമ്പർ, ഈ സീരിയൽ നമ്പറുള്ള ഘടകത്തിന് മുമ്പുള്ള എല്ലാ ഘടകങ്ങളും ഞങ്ങൾ തിരഞ്ഞെടുക്കുന്നു:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

ഫോണ്ട്-വെയ്റ്റ്:ബോൾഡ് ; 150 %;

ഓരോ മൂന്നാമത്തെ ഘടകവും തിരഞ്ഞെടുക്കാൻ CSS: nth-child കപട ക്ലാസ് ഉപയോഗിക്കുന്നു

കപട-ക്ലാസ്: nth-child എന്നത് ആവശ്യമുള്ള മൂലകത്തിൻ്റെ ക്രമത്തിൽ എത്ര ഘടകങ്ങൾ ഉണ്ടെന്നും ഓർഡിനൽ നമ്പറും വ്യക്തമാക്കിക്കൊണ്ട് മൂലകങ്ങളുടെ ഒരു ശ്രേണി തിരഞ്ഞെടുക്കാൻ ഉപയോഗിക്കാം. നിങ്ങൾ മൂല്യം സജ്ജമാക്കുകയാണെങ്കിൽ 3n+1, ആദ്യത്തേതിൽ നിന്ന് ആരംഭിക്കുന്ന ഓരോ മൂന്നാമത്തെ ഘടകവും തിരഞ്ഞെടുക്കപ്പെടും:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

നിറം:പച്ച; ) 150 %;

വിചിത്ര ഘടകങ്ങൾ മാത്രം തിരഞ്ഞെടുക്കാൻ CSS: nth-child pseudo-class ഉപയോഗിക്കുന്നു

ഒറ്റ ക്രമ സംഖ്യകളുള്ള എല്ലാ ഘടകങ്ങളും തിരഞ്ഞെടുക്കുന്നതിന് നിങ്ങൾക്ക് കപട-ക്ലാസ്: nth-child എന്നത് ഒറ്റത്തവണയായി സജ്ജീകരിക്കാം. അതായത്, ഒന്നാമത്തേത്, മൂന്നാമത്തേത്, അഞ്ചാമത്തേത്, ഏഴാമത്തേത്, ഒമ്പതാമത്തേത്, മുതലായ ഘടകങ്ങൾ. അടുത്തുള്ള പട്ടിക വരികൾക്കായി നിറങ്ങൾ ക്രമീകരിക്കുന്നതിന് ഇത് വളരെ സൗകര്യപ്രദമാണ്.

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#തിരഞ്ഞെടുപ്പ്_ഉദാഹരണം li:nth-child (-n+5 ) ( font-size: 150 %;

ഇരട്ട-സംഖ്യയുള്ള ഘടകങ്ങൾ മാത്രം തിരഞ്ഞെടുക്കാൻ CSS: nth-child pseudo-class ഉപയോഗിക്കുന്നു

ഈ ഉദാഹരണം അവസാനത്തേതിന് സമാനമാണ് കാണിക്കുന്നത്, എന്നാൽ ഇത്തവണ എല്ലാ ഇരട്ട-സംഖ്യകളുള്ള ഘടകങ്ങളും തിരഞ്ഞെടുത്തു. അതായത്, രണ്ടാമത്തെ, നാലാമത്തെ, ആറാമത്തെ, എട്ടാമത്തെ, പത്താം, മുതലായവ ഘടകങ്ങൾ:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#തിരഞ്ഞെടുപ്പ്_ഉദാഹരണം li:nth-child (3n+1 ) ( font-size: 150 %;

ആദ്യ ഘടകം തിരഞ്ഞെടുക്കാൻ CSS:first-child pseudo-class ഉപയോഗിക്കുന്നു

മറ്റൊരു കപട ക്ലാസ്:ആദ്യ കുട്ടി ആദ്യ ഘടകം തിരഞ്ഞെടുക്കും:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#സെലക്‌ടർ_ഉദാഹരണം ലി:ഒന്നാം-കുട്ടി (ഒറ്റം) (ഫോണ്ട്-സൈസ്: 150 %;

അവസാന ഘടകം തിരഞ്ഞെടുക്കാൻ CSS:last-child pseudo-class ഉപയോഗിക്കുന്നു

കപട-ക്ലാസ്:ഫസ്റ്റ്-ചൈൽഡ് കൂടാതെ, ഒരു കപട-ക്ലാസ്:ലാസ്റ്റ്-ചൈൽഡ് ഉണ്ട്, അത് ഒരു കൂട്ടം ഘടകങ്ങളിൽ നിന്ന് അവസാനത്തെ ഘടകം തിരഞ്ഞെടുക്കും:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#selector_example li: nth-child (പോലും) ( font-size: 150 %;

രണ്ടാമത്തേത് മുതൽ അവസാനത്തേത് വരെയുള്ള ഘടകം തിരഞ്ഞെടുക്കാൻ CSS: nth-last-child pseudo-class ഉപയോഗിക്കുന്നു

അവസാനം മുതൽ മൂലകങ്ങൾ എണ്ണാൻ തുടങ്ങുന്നതിന്, നിങ്ങൾക്ക് കപട-ക്ലാസ്:nth-last-child എന്ന കപട-ക്ലാസ്സുകളുടെ കഴിവുകൾ:last-child,:nth-child എന്നിവയും ഉപയോഗിക്കാം. അതായത്, ഗ്രൂപ്പിൻ്റെ അവസാനത്തിൽ നിന്ന് സീരിയൽ നമ്പറുകൾ എണ്ണിക്കൊണ്ട് നിങ്ങൾക്ക് ഒരു ഘടകം തിരഞ്ഞെടുക്കാം, ഉദാഹരണത്തിന്, പത്ത് ഘടകങ്ങളുടെ ഒരു ഗ്രൂപ്പിൽ നിങ്ങൾക്ക് അവസാനത്തിൽ നിന്ന് രണ്ടാമത്തെ ഘടകം തിരഞ്ഞെടുക്കാം:

ഘടകം 1
ഘടകം 2
ഘടകം 3
ഘടകം 4
ഘടകം 5
ഘടകം 6
ഘടകം 7
ഘടകം 8
ഘടകം 9
ഘടകം 10

#സെലക്‌ടർ_ഉദാഹരണം ലി:ആദ്യകുട്ടി (ഫോണ്ട്-സൈസ്: 150 %;

#സെലക്ടർ_ഉദാഹരണം ലി:ലാസ്റ്റ്-ചൈൽഡ് (ഫോണ്ട്-സൈസ്: