:nth-child()
Misol
:nth-child() psevdo-klassidan qanday foydalanish:
/* Selects every fourth element among any group of siblings */
:nth-child(4) {
background-color: yellow;
}
/* Selects the second element of div siblings */
div:nth-child(2) {
background-color: red;
}
/* Selects the second li element in a list */
li:nth-child(2) {
background-color: lightgreen;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
CSS :nth-child(n) psevdo-klassi ota elementining n-bolasi bo‘lgan istalgan elementga mos keladi.
Bu psevdo-klass elementlarni ularning ota elementlaridagi bolalar ro‘yxatidagi indekslariga qarab moslashtiradi.
n son/indeks, kalit so‘z (odd yoki even) yoki formula (masalan, an + b) bo‘lishi mumkin.
Maslahat: Ota elementining bir xil turdagi (teg nomi) n-bolasi bo‘lgan elementni tanlash uchun :nth-of-type() psevdo-klassiga qarang.
| Versiya: | CSS3 |
|---|
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar psevdo-klassni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Psevdo-klass | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS sintaksisi
Ko‘proq misollar
Misol
Odd va even — indeksi toq yoki juft bo‘lgan bola elementlarni moslashtirish uchun ishlatiladigan kalit so‘zlar (birinchi bolaning indeksi 1 ga teng).
Bu yerda toq va juft p elementlari uchun ikki xil fon rangini belgilaymiz:
p:nth-child(odd) {
background-color: red;
}
p:nth-child(even) {
background: lightgreen;
}
O‘zingiz sinab ko‘ring »
Misol
Formuladan foydalanish (an + b). Tavsif: a butun sonli qadam o‘lchamini ifodalaydi, n — 0 dan boshlab barcha manfiy bo‘lmagan butun sonlar, b esa butun sonli siljish qiymati.
Bu yerda indeksi 3 ga karrali bo‘lgan barcha p elementlari uchun fon rangini belgilaymiz (uchinchi, oltinchi, to‘qqizinchi va h.k. elementlarni tanlaydi):
p:nth-child(3n+1) {
background-color: red;
}
O‘zingiz sinab ko‘ring »
Misol
Bu yerda indeksi 3 ga karrali bo‘lgan barcha p elementlari uchun fon rangini belgilaymiz. So‘ng 1 ni ayiramiz (birinchi, to‘rtinchi, yettinchi va h.k. elementlarni tanlaydi):
p:nth-child(3n-1) {
background-color: red;
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!