Pseudo klas nth-child

Pseudo klas nth-child, eýeniň n-inji nesli bolan element saýlaýar.

Sintaksis

csssaýlaýjy:nth-child(san | odd | even | aňlatma) {
  
}

Bahalar

Baha	Düşündiriş
san	`1`-den başlap, öňüýetli san. Ýüz tutmak isleýän elementimiziň nomerini kesgitleýär. Elementleriň nomerlendirilişi `1`-den başlaýar.
`odd`	Taq elementler.
`even`	Jübüt elementler.
aňlatma	n harpy bilen ýörite aňlatmalar düzüp bolýar, n harpy noldan (birden däl) çäksizlige çenli bolan ähli bitin sanlary aňladýar. Şonuň ýaly, `2n` - ähli jübüt sanlar (ikinciden başlap) diýmekdir. Munany nädip düşünmeli? n-ä `0` we ş.m. yzygiderli sanlary goýýarys: eger n = 0 bolsa, 2n 0 berer - şeýle element ýok (elementleriň nomerlendirilişi 1-den başlaýar), eger n = 1 bolsa, 2n 2 berer - ikinji element, eger n = 2 bolsa, 2n 4 berer - dördünji element. Eger 3n ýazsaňyz - bu her üçünji element (üçünjiden başlap) bolar, we ş.m.

Mysal

Bu mysalda biz gyzyl reňki öz eýesiniň 4-inji nesli bolan li element üçin ederis:

html<ul>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
</ul>

cssli:nth-child(4) {
  color: red;
}

Результат:

Mysal

Indi ähli jübüt li elementleri gyzyl ederis:

html<ul>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
</ul>

cssli:nth-child(even) {
  color: red;
}

Результат:

Mysal

Indi ähli taq li elementleri gyzyl ederis:

html<ul>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
</ul>

cssli:nth-child(odd) {
  color: red;
}

Результат:

Mysal

Indi her üçünji li elementleri gyzyl ederis (üçünjiden başlap):

html<ul>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
</ul>

cssli:nth-child(3n) {
  color: red;
}

Результат:

Mysal

Saýlaýjyda elementleriň diapazonyny görkezip bolýar. Mysal üçin, siziň 20 elementden ybarat sanawyňyz bar we 7-den 14 çenli (şolaryň özi hem) elementleri saýlamak zerur. Munu şeýle etmek bolýar:

html<ol>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
  <li> sanaw elementi</li>
</ol>

cssli:nth-child(n+7):nth-child(-n+14) {
  color: red;
}

Результат: