Pseudo klas nth-child
Pseudo klas nth-child, eýeniň n-inji nesli
bolan element saýlaýar.
Sintaksis
saý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:
<ul>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
</ul>
li:nth-child(4) {
color: red;
}
:
Mysal
Indi ähli jübüt li elementleri gyzyl ederis:
<ul>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
</ul>
li:nth-child(even) {
color: red;
}
:
Mysal
Indi ähli taq li elementleri gyzyl ederis:
<ul>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
</ul>
li:nth-child(odd) {
color: red;
}
:
Mysal
Indi her üçünji
li elementleri gyzyl ederis
(üçünjiden başlap):
<ul>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
<li> sanaw elementi</li>
</ul>
li: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:
<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>
li:nth-child(n+7):nth-child(-n+14) {
color: red;
}
:
