Bunday selektordan, to'g'rirog'i, n-child sarlavhalarining psevdo-sinfidan foydalaning. Axis dumba yoga Viktoriya:
UL LI:nchi bola(3n+3) (rang:#CCC; )
CSS-kodni ko'proq o'g'irlash uchun nima qilish kerak? Belgilangan ro'yxatning o'rtasida uchinchi elementning terisini tanlang: keyin 3, 6, 9, 12. Keling, hayron bo'laylik, siz ushbu virusni qanday qo'llaysiz va yordam uchun yana nima qila olasiz: nth-child.
Hamma arklar orasida ma'lum bo'lgan ko'z oldida yotadi. Selektor: nth-child ikkita kalit so'zni qabul qiladi: juft va toq. Bu erda hamma narsa oddiy: hatto 2, 4, 6, va hokazo kabi juftlangan elementlarni tanlaydi va g'alati 1, 3, 5 va hokazo kabi juftlashtirilmagan elementlarni tanlaydi. d.
Birinchi dumbadan ko'rinib turibdiki, :nth-child ham Virase uchun parametr sifatida qabul qiladi. Navyt eng oddiy rívnyannya, ínakshe kazhuchi, faqat raqamlar. Agar siz ularni kishanga qo'ysangiz, tegishli raqamdan faqat bitta element tanlanadi. Masalan, faqat beshinchi elementni qanday tanlash mumkin:
UL LI:nth-child(5) (rang:#CCC; )
Biroq, keling, birinchi dumba bilan 3n + 3 ga murojaat qilaylik. Siz qanday ishlaysiz va nima uchun terining uchinchi elementi ishlatiladi? rozumíní zmínnoí̈ n butun diqqat markazida bu algebra darajasini induktsiya. n ni noldan boshlanadigan shaxssiz butun son sifatida tasavvur qiling. Keling, rivnyannia dopovnyt qilaylik. Demak, 3n 3×n va hamma narsa bir vaqtning o‘zida ce (3×n)+3 ga teng. Endi noldan katta yoki teng n ta raqamni almashtirib, biz quyidagilarni olamiz:
- (3×0) + 3 = 3 = 3-element
- (3 × 1) + 3 = 6 = 6-element
- (3×2) + 3 = 9 = 9-element juda yupqa.
Schodo haqida nima deyish mumkin: n-child (2n + 1)?
- (2 × 0) + 1 = 1 = 1-element
- (2 × 1) + 1 = 3 = 3-element
- (2×2) + 1 = 5 = 5-element juda yupqa.
Shunday qilib, to'xtang! Aje tse bir xil, scho i g'alati. Tody, ehtimol, varto vikoristati tsey vislyv emas? Ale khíba in tsomu vipadku mi emas narazhaemo bizning birinchi dumba zayve ukladnennya haqida? Xo'sh, qanday qilib 3n+3 o'rniga 3n+0 yozishimiz mumkin, nima uchun u 3n dan oddiyroq?
- (3 × 0) = 0 = hech narsa
- (3 × 1) = 3 = 3-element
- (3 × 2) = 6 = 6-element
- (3×3) = 9 = 9-element juda yupqa.
Shunday qilib, siz bachiti qila olasiz, natija bir xil bo'ladi va shuning uchun +3 ga ehtiyoj yo'q. Biz n ning manfiy qiymatini tenglikdagi kabi muvaffaqiyat bilan yutib olishimiz mumkin. Masalan, 4n-1:
- (4 × 0) - 1 = -1 = hech narsa
- (4×1) - 1 = 3 = 3-element
- (4 × 2) - 1 = 7 = 7-element va boshqalar.
Vikoristannya -n ajoyib bo'lishi mumkin - agar yakuniy natija salbiy bo'lsa, unda siz vibratordan hech qanday elementlarni isrof qilmasligingiz kerak. Va shunga qaramay, agar siz ko'proq teng qo'shsangiz va natijani ijobiy bilan yangilasangiz, vibrator uni cicava bilan tugatgandek ko'rinadi: yordam uchun siz birinchi n elementni olib tashlashingiz mumkin, masalan: -n + 3:
- -0 + 3 = 3 = 3-element
- -1 + 3 = 2 = 2-element
- -2 + 3 = 1 = 1-element
- -3 + 3 = 0 = hech narsa va hokazo.
SitePoint-da yaxshi belgi bilan yaxshi kun bor, men bu erda uyalmasdan e'lon qilaman:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Brauzerlar tomonidan qo'llab-quvvatlash
:nth-child selektori kambag'al CSS selektorlaridan biri bo'lib, u hali ham zamonaviy brauzerlarda qo'llab-quvvatlanishi mumkin va IE8 kabi IEda mutlaqo qo'llab-quvvatlanmaydi. Shuning uchun, siz o'ngdagi yogo Twist etib, va progressiv abraziv texnologiyasi vayron so'nggi natija - jadvallar zabarvlenny qatorlar kabi, ba'zi dizayn elementlari uchun jasorat bilan yogo chirp mumkin. Biroq, jiddiyroq kayfiyatda yoga bilan shug'ullanishni to'xtatmang. Misol uchun, saytning tartibida yangisiga tayanib qo'ying yoki uchdan uchgacha bo'lgan panjaradagi uchinchi teri blokidan o'ng maydonni ko'ring, shunda hid keyingi qatorga yo'qoladi.
CSS nth-child - bu qo'shimcha raqamli qiymat uchun elementlarni tanlash uchun ishlatiladigan psevdo-sinf. Bir qarashda, sintaksis biroz chalkash bo'lishi mumkin.
Biz ushbu maqolalarda ko'rishimiz mumkin:
- g'alaba qozonishning turli usullari: n-chi bola;
- ko'proq moslashuvchan selektor: n-turi;
- va ular bilan bog‘langan tanlagichlar: n-chi-oxirgi-child i: n-chi-oxirgi-tur.
:turning oxirgi turi
:nth-last-of-pe pastki elementlarni tanlaydi, shunda ularning hujjatdagi joylashuvi algebraik tilda tasvirlangan naqshga mos keladi.
:nth-last-of-type selektori quyidagicha ko'rinadi:
li: n-chi bola (viraz); ()
"Viraz" juft yoki toq kalit so'zlar bilan ifodalanishi mumkin, butun son yoki kshtalt formulasi an+b , bu erda a va b sonning butun sonlari, musbat yoki manfiy.
CSS psevdo-sinfining n-chi bolasi turli elementlar diapazonini tanlash uchun belgilanishi mumkin. Keling, amaliy dasturlarni ko'rib chiqaylik, shunda u yanada oqilona bo'ladi.
Menda 12 ta elementdan iborat belgilar ro'yxati bor. Qo'shiq elementini yoki naqsh orqasidagi elementlar to'plamini tanlash uchun :nth-child ni qanday burishingiz mumkinligi qiziq:
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
Ro'yxatdagi uchinchi elementni tanlash uchun siz aytishingiz kerak li:nth-child(3) . Barcha juftlik elementlarini tanlash uchun siz juft kalit so'zni yutib olishingiz mumkin. Birinchidan, juftlashtirilmagan raqamga ega barcha elementlarni tanlash uchun :nth-child(odd) ni ham tanlashingiz mumkin.
CSS nth bola terisi 3rd - ixtiyoriy li: nth-child (3n). Birinchi elementlardan ba'zilarini tanlash uchun vikoristovuemo li:nth-child(-n+4) . Hamma narsani tanlash uchun birinchi bir necha elementlar atrofida li:nth-child(n+5) ni tanlashingiz mumkin.
Viraz an + b
Toq kalit soʻz variantiga muqobil variant 2n+1 variantidir. Ale, bu qanday ishlaydi?
Agar a va b qiymatlari an+b formatida null bo'lsa, asosiy elementlar guruhlarga bo'linadi. Virase 2n+1 singari, qiz elementlar ikki guruhga bo'linadi. Guruhning teri elementiga 1 dan boshlab indeks beriladi. Teri guruhidagi muhim element - indeks raqami b. Dumba birinchi elementga ega bo'ladi.
Masalan, virase 3n + 2 elementlari uchta element bo'yicha guruhlangan va teri guruhidagi boshqa element virazni ko'rsatadi.
Agar b qiymati manfiy bo'lsa, u holda guruh b indeksi bilan bir xil elementga ega. Ale vín vídrakhovuêtsya víd vorotnym napryazku víd íindex 1. Va bu erda asosiy element berilgan emas, balki guruh oldida yotadi.
Hatto CSS n-chi bola kalit so'zi 2n kabi kengaytirilishi mumkin. Bunday holda, b ning qiymati mumkin emas, shuning uchun a indeksli guruhning teri elementi tanlanadi; 2n boshqa elementning terisini tanlang, 3n - uchinchisining terisini, 4n - to'rtinchisining terisini yupqa qilib tanlang.
Men, ayniqsa, qizaloq elementlarni guruhlarga va teri guruhi uchun hayotiylik indeksiga ko'ra ajratish tushunchasi allaqachon chalkashib ketganiga e'tibor beraman. Men CSS selektorlarining spetsifikatsiyasini shu tarzda tasvirlamoqchiman.
Teri n-elementini izlash tushunchasi - teri 2, 3 va 4-chi, ko'proq mos keladi. Va keyin men uchun ongning boshqa qismi almashtirilganligini ko'rsatish osonroq.
Vipadku 2n + 1 da men tsey virazni shunday o'qiyman: " Terining boshqa elementini bilib oling va ko‘rinishni 1 ga pastga siljiting».
Yakshcho viraz 3n-5, uni shunday o'qish kerak: " Uchinchi elementning terisini bilib oling va ko'rishni 5 ga o'tkazing».
Boshqa tanlovchilar: nth-child
:nth-child boshqa psevdo-sinf bo'lishi mumkin :nth-last-child , xuddi shu tarzda ishlaydi.
li:nth-last-child(3n) qolgan bola elementidan boshlanadi va ularni to'g'ridan-to'g'ri qayta ishlaydi, uchinchi elementni ro'yxat oxiridan qiladi.
Tsei psevdoklassi kamroq kengaytmalarga ega. Prote ko'pincha birinchi yoki qolgan bola elementni tanlash uchun kerak bo'ladi. Shuningdek, :nth-child(1) yoki :nth-last-child(1) boʻyicha ham yordam izlashingiz mumkin, lekin bu usul :first-child va :last-child psevdo-sinflari kabi tez-tez ishlatilmaydi. Bunda: birinchi bola IE8 da amal qiladi, lekin: oxirgi bola i: n-chi-selektor emas.
:turning n-chi
Men ko'pincha qoniqarsiz deb topadigan narsa shundaki, CSS n-chi bola psevdo-sinfi indeksdan keyin bola elementlarni tanlaydi va element turini tekshirmaydi.
Keling, hujum qilayotgan dumbani ko'rib chiqaylik.
Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue; Nunc sed turpis. Donec posuere vulputate arcu;lorem ipsum;
Ê sarlavhalar, kichik sarlavhalar va paragraflarga bo'lingan. Men trochning birinchi xatboshi kattaroq 1,5 m shrift o'lchami orqasida ko'rinishini xohlayman.
Siz p:birinchi bola kodi bo'limiga yozishga urinib ko'rishingiz mumkin, bu bo'limdagi birinchi xatboshi uchun maxsus uslubni o'rnatishingiz kerak bo'ladi. Ale emas spratsyuê, oskílki birinchi bola element h1 bo'lingan. Bunday holda, siz :birinchi turdagi selektorni burishingiz kerak.
Ushbu tur uchun selektorlarning oxirgi qatoridan foydalaning: birinchi turdagi,: oxirgi turdagi,: n-turi i: n-chi turdagi oxirgi. Xushbo'y hid o'zini shunday tutadi, masalan: n-child, lekin qo'shiq turidagi elementlarning n-i misollarini tanlang.
Ro'yxatdagi qo'shiq elementini tanlash uchun psevdo-sinflarni burish mumkin. Ushbu maktabda biz psevdo-sinf haqida bilamiz: n-chi bola, bu psevdo-sinfning yordami uchun nima yaratilishi mumkin va qaysi vinolar makkajo'xori bo'lishi mumkin. Pseudoclass:nth-child sizga yuqori kuchlardan elementlar guruhini tanlash imkonini beradi. Sharoblarning ko'pchiligi guruhdan juftlangan va juftlashtirilmagan elementlarni tanlash uchun tanlanadi. Ko'z qisib qo'yish odatiy hol emas, shuning uchun stol zebraga o'xshardi, erkak va juft bo'lmagan qatorlar fonida turli xil ranglarni o'rnatdi.
Yana bir psevdo-sinf: nth-child sizga asosiy kuchdan elementlarni guruhlarga bo'lish va keyin teri guruhidan qo'shiq elementini tanlash imkonini beradi, g'olibona haqoratli sintaksis:
Bu yerda a guruhdagi elementlar sonini aniqlaydi va b guruhdan qaysi element olinishini tanlang.
chi vikoristuvati qiymati 2n+1, keyin elementlar ikkitadan guruhlarga bo'linadi va teri guruhining birinchi elementlari, keyin juftlashtirilmagan seriya raqamiga ega elementlar tanlanadi. Qanday vikoristovuvaty qiymati 2n+2, keyin elementlar yana ikkitadan guruhlarga bo'linadi, lekin endi teri guruhining boshqa elementlari, juftlashtirilgan seriya raqamiga ega bo'lgan elementlar tanlanadi.
Pseudo-sinfning bibariya uchun yana bir misol: nth-child mi vibero z yogo qo'shimcha ravishda terining to'rtinchi elementi, ya'ni chorak, sakkizinchi, o'n ikki, o'n oltinchi va boshqalar.
Quyida o'nta element ro'yxati keltirilgan va biz psevdo-sinflar bo'yicha tezlashamiz: nth-child,: first-child í: last-child, siz ko'rmoqchi bo'lgan elementlarni tanlash uchun.
Bitta elementni tanlash uchun CSS pseudo-class:nth-child ga murojaat qilish
:nth-child psevdo-sinfiga raqam sifatida qiymat berish orqali siz qaysi sarlavhani guruhga kiritishni tanlashingiz mumkin:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Barcha elementlarni tanlash uchun CSS pseudo-class:nth-child-ga murojaat qilish, birinchi beshta
Psevdo-sinfni qanday o'rnatish kerak: ko'rish uchun n-child qiymati n+ raqam, siz ushbu tartib raqamiga ega bo'lgan elementdan boshlab barcha elementlarni tanlashingiz mumkin:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Birinchi besh elementni tanlash uchun CSS pseudo-class:nth-child-ga murojaat qiling
Pseudo-klassni o'rnatganimizda: nth-child manfiy qiymatga n+ raqam bo'lsa, biz ushbu tartib raqami bilan elementdan oldingi barcha elementlarni tanlaymiz:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Uchinchi teri elementini tanlash uchun CSS:nth-child psevdo-sinfining varianti
Pseudo-class:nth-child ketma-ketlikdagi elementlar sonini va kerakli elementning tartib raqamini belgilab, elementlar ketma-ketligini tanlash uchun belgilanishi mumkin. Qiymatni qanday kiritish kerak 3n+1, uchinchi elementning terisi birinchisidan boshlab olinadi:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Faqat juftlashtirilmagan elementlarni tanlash uchun muqobil CSS pseudo-class:nth-child
Bog'lanmagan tartib raqamlari bo'lgan barcha elementlarni tanlash uchun siz psevdo-sinfni o'rnatishingiz mumkin: toq (juftlanmagan) qiymatning nth-child. Tobto, birinchi, uchinchi, beshinchi, somy, to'qqizinchi elementar. Jadvallarning dunyoviy qatorlari uchun ranglarni o'rnatish yanada qulayroq.
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
O'g'il bolalardan ko'proq elementlarni tanlash uchun CSS pseudo-class:nth-childga o'ting
Bu tugma birinchi marta juftlashtirilgan seriya raqamlari bo'lgan barcha elementlar birinchi marta tanlanganligini ko'rsatadi. Ya'ni, boshqa, to'rtinchi, oltinchi, sakkizinchi, o'ninchi va hokazo elementlar:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Birinchi elementni tanlash uchun CSS pseudo-class: first-child versiyasi
Ikkinchi psevdo-sinf: birinchi bola Birinchi elementni tanlang:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Oxirgi elementni tanlash uchun CSS: last-child psevdo-sinfiga murojaat qilish
Krim pseudo-sinf: birinchi farzand ê pseudo-sinf: oxirgi bola, qaysi biri elementlar guruhining oxirgi elementi bo'lsa:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
Old elementni tanlash uchun CSS pseudo-class:nth-last-childga a'zo bo'ling
Shuningdek, siz psevdo-sinfni yutib olishingiz mumkin: n-chi-oxirgi bola, bu psevdo-sinflar imkoniyatini oshiradi: oxirgi-child í: n-child Shunday qilib, siz guruhdagi seriya raqamlaridan foydalanib, elementni tanlashingiz mumkin, masalan, o'nta elementdan iborat guruhda siz boshqa elementni tanlashingiz mumkin:
Element 1
Element 2
Element 3
Element 4
Element 5
Element 6
Element 7
Element 8
Element 9
Element 10
n-child konstruktor boʻyicha koʻproq yordam olish uchun n-child psevdo-sinf imkoniyatlarini koʻring.
Ba'zan, tomonlarning dizayni bilan siz CSS uslublarini biroz avtomatlashtirishni xohlaysiz.
Siz qotib qolishingiz mumkin bo'lgan muammolardan biri: ro'yxat, jadval, blok va veb-saytdagi boshqa elementlardagi barcha juft elementlarni qanday tanlash kerak.
Shubhasiz, bir xil qo'shiqchi sinfni teriga juftlashgan elementga jalb qilish mumkin, agar elementlar juda boy bo'lmasa, yaxshiroq. Men hamma narsani qo'lda qo'shaman, kutmang, bu mumkin va xohlamayman.
Men sizga eng yaxshi pseudo-sinfga asoslangan usul haqida gapirib bermoqchiman n-chi bola.
Ushbu psevdo-sinf CSS3 da paydo bo'ldi, uni hurmat qilish uchun ona kerak, bu eski brauzerlarda ishlamasligi mumkin. Ale mozhlivosty, yaky z'yavlyayutsya da yogo vikoristanny, allaqachon dushmanlik.
Ushbu psevdoklassni amalda olish usullaridan biri HTML hujjatining daraxti bo'yicha tartiblangan barcha o'g'il elementlarni tanlashdir.
Inuê kílka variantív yak tse uni amalga oshirish mumkin. Keling, ularni ko'rib chiqaylik.
1 variant. Juft parametrini tvit qiling.
Aytaylik, bizda quyidagi ro'yxat mavjud:
- Element 1
- Element 2
- Element 3
- Element 4
- Element 5
- Element 6
- Element 7
- Element 8
- Element 9
- Element 10
Ushbu ro'yxatdagi barcha elementlarni qizil rangda ko'rish uchun siz CSS uslubini qo'shishingiz kerak:
Ul li:nchi bola(hatto) (rang:#F00;)
Natijada biz rasmni ko'ramiz.
Hatto - bu kalit so'z, ya'ni elementlarning yigitlari tanlanadi.
Garne yechim, chi shunday emasmi? Faqat bir qator CSS uslublari.
2 variant. 2n parametrini belgilang.
Bu variant muqobil sifatida g'alaba qozonishi mumkin. 2n qiymati boshqa element ko'rsatiladi, va boshqa element, aslida, boshqa element ko'rsatiladi.
Stollar uchun eksa yak tse mozhe buti vikoristane.
| Stovpetlar 1 | Stovpets 2&. t;td>6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
I CSS uslublari
Tr:nth-child(2n) (rang:#F00;)
Teri juftlashgan element tr matni chervonimga aylandi.
webgyry.info
Brauzerlar tomonidan qo'llab-quvvatlash
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Tavsif
Pseudo-class:nth-child() asosiy elementning o'rtasidagi joylashuvi (raqami) asosida asosiy elementlarni tanlaydi.
Sintaksis
:nchi bola (raqam) (hokimiyat)Dumaloq kamarlar uchun argument ko'rsatilgan bo'lib, u raqam, kalit so'z yoki + b ko'rinishidagi raqamli ifoda bo'lishi mumkin, bu erda a va b butun sonlar, n esa avtomatik ravishda butun manfiy qiymatlarni qabul qiladigan raqamdir. 0 va undan kattaroq: 0, 1, 2, 3, ….
Qo'shimcha raqam uchun siz ichki elementning ma'lum bir tartib raqamini belgilashingiz mumkin, uslubni qanchalik o'rnatishingiz kerak:
/* roʻyxatdagi uchinchi elementni tanlang */ ul li:nth-child(3) (rang: qizil; )
Usyi ikkita mumkin bo'lgan kalit so'zlarga ega: toq (juftlanmagan) va juft (juftlangan). Ular sizga juftlangan yoki ajratilmagan seriya raqamlarini tanlashga imkon beradi:
/* juftlashtirilmagan tartibli jadvaldagi barcha qatorlarni tanlang */ tr:nth-child(odd) td (fon rangi: kumush; )
Indeksning "an" qismi quyidagi formula bo'yicha kichik elementlarning pozitsiyalarini hisoblab chiqadi: raqam * n, chunki n oxirgisi bo'lib, yangisi o'rniga, hisoblashda raqamli qiymatlar avtomatik ravishda qo'shiladi. 0 dan va keyingi qiymatlar oldingidan bir marta ko'paytiriladi, 1,2: 3 va hokazo. Biz ro'yxatdagi uchinchi elementni tanlashimiz mumkin, buning uchun biz faqat 3n yozishimiz kerak:
ul li:nth-child(3n) (rang: qizil; )
3 * 0 = 0 - hech narsa tanlanmagan
3 * 1 = uchinchi element
3 * 2 = 6-band
va boshqalar.
Virusning bir qismi "b" sizni belgilash imkonini beradi, qaysi pozitsiyadan quyidagi elementlarni boshlash mumkin. Ro'yxatning boshqa bandidan boshlab biz uchinchi elementni tanlashimiz mumkin, buning uchun keyingi qatorni 3n + 2 yozishimiz kerak:
Ul li: n-chi bola (3n + 2) (rang: qizil; )
Ushbu tartibda ro'yxatdagi elementlar quyidagi formula bo'yicha tanlanadi:
(3 * 0) + 2 = boshqa element
(3 * 1) + 2 = 5-band
(3 * 2) + 2 = 8-band
va boshqalar.
Dumba:
| matn |
| matn |
| matn |
| matn |
| matn |
| matn |
| matn |
| matn |
| matn |
| matn |
Men murojaat qiladigan natija:
puzzleweb.ru
Brauzerlar tomonidan qo'llab-quvvatlash
Tanlovchi: n-chi bola
- zamonaviy brauzerlarda ko'proq qo'llab-quvvatlanadigan va IE8da bo'lgani kabi IEda mutlaqo qo'llab-quvvatlanmaydigan bir nechta CSS selektorlaridan biri. Shuning uchun, siz o'ngdagi yogo Twist etib, va progressiv abraziv texnologiyasi vayron so'nggi natija - jadvallar zabarvlenny qatorlar kabi, ba'zi dizayn elementlari uchun jasorat bilan yogo chirp mumkin. Biroq, jiddiyroq kayfiyatda yoga bilan shug'ullanishni to'xtatmang. Misol uchun, saytning tartibida yangisiga tayanib qo'ying yoki uchdan uchgacha bo'lgan panjaradagi uchinchi teri blokidan o'ng maydonni ko'ring, shunda hid keyingi qatorga yo'qoladi.
Shu bilan bir qatorda, barcha CSS selektorlarini amalga oshiradigan jQuery kutubxonasi bo'lishi mumkin, jumladan: nth-child, Internet Explorer-da navigatsiya.
web-standards.com
Ahamiyati va zastosuvannya
psevdoklass :nth-child() Batkiv elementining o'rtasida joylashgan bola elementlarini ularning joylashgan joyida (seriya raqami) tanlash imkonini beradi.
Ushbu psevdo-sinfning belgilanishi kengroq bo'lib, u sizga jadvallar, ro'yxatlar qatorlari uslublarini chizish, uslubni boshqa bolalar elementlariga ham qo'llash imkonini beradi.
CSS sintaksisi:
:nth-child(raqam | kalit so'z | formula)(Blok stun; )Butt vikoristannya
Seriya raqami bo'yicha stilizatsiya
Keling, rasmdagi to'q sariq rangda ko'rinadigan barcha elementlar uchun uslubni o'zgartirishingiz kerak bo'lgan misolni ko'rib chiqaylik:
Tasvirda ko'rinadigan elementlarda uyqu nima? Va to'q sariq ranglar bilan ko'rinadiganlar, ular orasida issiqroqdir. Qiziqmi? Men o'ylamayman. Barcha bir xil, ular hali ham bir zagalne, elementlar bor
siz uni buzishingiz mumkin, bu yoga seriya raqami uchinchi bo'ladi (otangizning uchinchi bola elementi). ). Ushbu elementlarni uslublash uchun biz psevdoklassni tanlashimiz kerak :nchi bola.
Masalan, keling:
Tana tegining birinchi h2 sarlavhasi
- bitta
- ikki
- uch
Tana tegining boshqa h2 sarlavhasi
Maqola tegining birinchi h2 sarlavhasi
- bitta
- ikki
- uch
:nchi bola Biz elementlarni shakllantirdik
і
Bizning dumbamiz natijasi:
Kalit so'z bo'yicha stilizatsiya
Pseudo-sinf ma'nosi sifatida :nth-child() uslub uchun zarur bo'lgan bola elementlarning tartib raqami va kalit so'zlar rolini bajarishi mumkin, chunki ular butun elementlar guruhini belgilashi mumkin. Kalit so'z sifatida siz ikkita ma'noga ega bo'lishingiz mumkin:
- hatto (yigit elementlari)
- g'alati (juftlanmagan elementlar)
Turli xil kalit so'zlar asosida elementlarning stilizatsiyasi kengroq qo'llanilishi mumkin, shuning uchun siz hujjatdagi erkak yoki juft bo'lmagan asosiy elementlarni tanlashingiz va uslublashingiz mumkin.
Misol uchun, keling, turli uslublar sinflari bilan ikkita oddiy jadval tuzamiz va psevdo-sinf uchun kalit so'zlarning qiymatidagi farqlarni ko'rib chiqamiz. :nchi bola HTML elementi uchun
| 1 qator | Lavozim | Kílkíst |
|---|---|---|
| 2 qator | ||
| 3 qator | ||
| 4 qator | ||
| 5 qator |
| 1 qator | Lavozim | Kílkíst |
|---|---|---|
| 2 qator | ||
| 3 qator | ||
| 4 qator | ||
| 5 qator |
G'alabalarning psevdo-sinfiga kimning arizasi :nth-child() uslub qildik yigitlar birinchi jadvalning qatorlari (elementlar
Oddiy matematik formula ortidagi stilizatsiya
psevdoklass :nth-child() elementar matematik formula bilan berilgan birinchi seriya raqamiga ega bo'lgan juftlik, unpairs, chi qizi elementlar va th kichik elementlar sifatida tanlash imkonini beradi. Keling, keyingi selektorni ko'rib chiqamiz va bu yozuv nimani anglatishini tushunamiz:
td:nchi bola (4n+2)- 4n- Teri to'rtinchi element.
- 2
Formulalar tan olish belgisi bilan boshqa ma'noga ega bo'lishiga ruxsat beriladi, ammo zaruriy narsalar yo'q:
td:nchi bola(4n-1)(fon rangi: ochiq ko'k; / * fon rangini belgilash * / )Ushbu selektor stol o'rtasining chorak terisi (
- 4n- Teri to'rtinchi element.
- -1 - Ba'zi elementni tuzating.
Keling, Viktoriya misolini ko'rib chiqaylik:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | |||||||||||||
| 3 | |||||||||||||
| 4 |
Biz stol o'rtasining chorak qismining terisini tanladik va uslubladik (
basicweb.ru
n-child CSS selektoridan qanday foydalanish kerak
CSS-da n-child sarlavhalarining selektori bor, bu aniqroq, psevdoselektor. Yogo Viktoriya dumba:
Ul li:nchi bola(3n+3) (rang: #ccc; )
Stop uchun CSS: tartibsiz ro'yxatdagi uchinchi elementning terisi uchun zastosovuyu uslublari. Va 3, 6, 9, 12 juda nozik. Ale, bu qanday ishlaydi? Va shuningdek, qanday qilib vigoda, vikoristuuchi n-chi bolani qabul qilishingiz mumkin?
Asosiy tuyg'u ma'badlardagi egilishlarda kuchliroqdir. nth-child ikkita kalit so'zni qabul qiladi: hatto(yigit) bu g'alati(Ajratilgan). Sens mutlaqo aqldan ozgan. Juftlangan elementlarni tanlang (2, 4, 6), toq - juftlashtirilmagan (1, 3, 5).
Dumbada ko'rsatilganidek, n-chi bola viraziga aylanishi mumkin. Eng oddiy virus nima? Shunchaki raqam. Agar siz raqamni yoylarda yozsangiz, bitta element yig'iladi. Masalan, ro'yxatning beshinchi elementini tanlang:
Ul li:nth-child(5) (rang: #ccc; )
Keling, birinchi dumbamizga, yakum mi vikorista virazga (3n + 3) murojaat qilaylik. Qanday ishlaysiz? Nima uchun uchinchi elementning terisini tanlaysiz? O'zgarishning butun mohiyati n. Bu nol yoki undan ko'p qiymatlarni oladi. Keling, hisobotni ko'rib chiqaylik:
(3 x 0) + 3 = 3 = 3-element (3 x 1) + 3 = 6 = 6-element (3 x 2) + 3 = 9 = 9-element va hokazo.
Keling, ushbu virusni sinab ko'raylik: n-child (2n+1):
(2 x 0) + 1 = 1 = birinchi element (2 x 1) + 1 = 3 = uchinchi element (2 x 2) + 1 = 5 = 5-element va hokazo.
Natijalar koeffitsientlar bo'yicha yutilgan narsalardan olingan, shuning uchun siz bunday daraja uchun bunday virazdan tez-tez foydalana olmaysiz. Bundan tashqari, bizning birinchi dumbamiz ham o'zgartirilishi va asl virase (3n + 3), virase (3n) bilan almashtirilishi mumkin:
(3 x 0) + 0 = 0 = haqiqiylik yo'q (3 x 1) + 0 = 3 = 3-element (3 x 2) + 0 = 6 = 6-element va boshqalar.
Yak bachite, xuddi shunday natija, lekin siz "+3" yozishingiz shart emas. Biz virazda salbiy qiymatni ham topishimiz mumkin. Masalan, 4n-1:
(4 x 0) - 1 = -1 = haqiqiy emas (4 x 1) - 1 = 3 = uchinchi element (4 x 2) - 1 = 7 = 7 element va boshqalar.
N koeffitsienti uchun salbiy qiymatlar soni hayratlanarli darajada kichik ko'rinadi, chunki farq salbiy natijada topilmaydi. Ijobiy elementlarni qo'shish uchun siz doimo virusni o'zgartirishingiz kerak bo'ladi. Ma'lum bo'lishicha, bu pidkhid allaqachon birinchi n elementning aqlli tanlovi edi. Keling, "-n + 3" bilan dumbani ko'rib chiqaylik:
0 + 3 = 3 = 3-element -1 + 3 = 2 = 2-element -2 + 3 = 1 = 1-element -3 + 3 = 0 = haqiqiy emas
Krossbrauzer
nth-child 8-versiya kabi IEda mutlaq nol shponining orqasida, o'zaro brauzer bo'lsa ham, eng muhim atributlardan biridir. Ya'ni, agar til yogo burilishlari haqida ketsa, natijada vizual effektning zanjirli dunyosi (masalan, jadvallar qatori, masalan), u ideal pidhiddir. Ale, ehtimol, bir muhim narsa uchun yogo vikoristovuvat varto yo'q, Agar xususda mumkin, deb, masalan, tartibi to'g'riligi haqida.
Shubhasiz, agar siz jQuery-dan foydalansangiz, jQuery-ning Internet Explorer-da qanday ishlashi haqida tashvishlanishingiz shart emas.
Xo'sh, namkinets
Siz dumba tomonidagi selektor uchun turli xil turlari bilan o'ynashingiz mumkin.
www.css-tricks.ru
Qiymat
| Qiymat | Tavsif |
|---|---|
| Raqam | Ijobiy raqam - 1. Biz qaytarmoqchi bo'lgan elementning sonini bildiradi. Elementlarni raqamlash birinchisidan boshlanadi. |
| g'alati | Birlashtirilmagan elementlar. |
| hatto | O'qish elementlari. |
| Viraz | n harfi bilan maxsus satrlarni birlashtirish mumkin, bu vid sonining barcha butun sonlarini bildiradi. nol (birga o'xshamaydi!) kechirimsizlikka. Demak, 2n barcha raqamlar juftligini bildiradi (boshqasidan boshlab). Qanday tushunish mumkin? n raqamini ketma-ket 0 va shunga o'xshash raqamlar bilan almashtiring: agar n = 0 bo'lsa, 2n 0 ni beradi, bunday element bo'lishi mumkin emas ( 1 dan elementlarni raqamlash!), agar n = 1 bo'lsa, 2n 2 ta boshqa elementni, n = 2 bo'lsa, 2n 4 ni - to'rtinchi elementni beradi. 3n ni qanday yozish kerak - uchinchi element bo'ladi (uchinchidan boshlab!), Va hokazo. |
Murojaat qiling
Butt
Bu dumbada biz yorqin qizil rangga egamiz, ya'ni 4-chi kurash uning otasi (o'rtada 4-o'rin):
Vikonanny kodining natijasi:
Butt
Nini chervonimi zrobimo hamma narsa yigitlar li:
Vikonanny kodining natijasi:
Butt
Nini chervonimi zrobimo hamma narsa juftlashtirilmagan li:
Vikonanny kodining natijasi:
Butt
Nini chervonimi zrobimo teri uchinchi li (uchinchidan boshlab):
Vikonanny kodining natijasi:
Butt
Selektor bir qator elementlarni belgilashi mumkin. Aytaylik, sizda 20 ta elementdan iborat ro'yxat bor va siz 7 dan 14 gacha bo'lgan elementlarni tanlashingiz kerak. Siz uni shunday o'g'irlashingiz mumkin:
Vikonanny kodining natijasi:
code.mu
Sintaksis
n-chi child psevdo-sinf bitta argument bilan ko'rsatilgan, bu mos keladigan elementlar uchun naqshni ifodalaydi.
kalit so'z qiymatlari
toq Birodarlar qatoridagi son joylashuvi toq bo'lgan elementlarni ifodalaydi: 1, 3, 5, va hokazo. even Bir qatordagi birodarlar soni juft bo'lgan elementlarni ifodalaydi: 2, 4, 6, va hokazo.funktsional belgi
Rasmiy sintaksis
:nchi bola(qayerda
qayerda
qayerda
qayerda
CSS-da n-child sarlavhalarining selektori bor, bu aniqroq, psevdoselektor. Yogo Viktoriya dumba:
Ul li:nchi bola(3n+3) (rang: #ccc; )
Stop uchun CSS: tartibsiz ro'yxatdagi uchinchi elementning terisi uchun zastosovuyu uslublari. Va 3, 6, 9, 12 juda nozik. Ale, bu qanday ishlaydi? Va shuningdek, qanday qilib vigoda, vikoristuuchi n-chi bolani qabul qilishingiz mumkin?
Asosiy tuyg'u ma'badlardagi egilishlarda kuchliroqdir. nth-child ikkita kalit so'zni qabul qiladi: hatto(yigit) bu g'alati(Ajratilgan). Sens mutlaqo aqldan ozgan. Juftlangan elementlarni tanlang (2, 4, 6), toq - juftlashtirilmagan (1, 3, 5).
Dumbada ko'rsatilganidek, n-chi bola viraziga aylanishi mumkin. Eng oddiy virus nima? Shunchaki raqam. Agar siz raqamni yoylarda yozsangiz, bitta element yig'iladi. Masalan, ro'yxatning beshinchi elementini tanlang:
Ul li:nth-child(5) (rang: #ccc; )
Keling, birinchi dumbamizga, yakum mi vikorista virazga (3n + 3) murojaat qilaylik. Qanday ishlaysiz? Nima uchun uchinchi elementning terisini tanlaysiz? O'zgarishning butun mohiyati n. Bu nol yoki undan ko'p qiymatlarni oladi. Keling, hisobotni ko'rib chiqaylik:
(3 x 0) + 3 = 3 = 3-element (3 x 1) + 3 = 6 = 6-element (3 x 2) + 3 = 9 = 9-element va hokazo.
Keling, ushbu virusni sinab ko'raylik: n-child (2n+1):
(2 x 0) + 1 = 1 = birinchi element (2 x 1) + 1 = 3 = uchinchi element (2 x 2) + 1 = 5 = 5-element va hokazo.
Natijalar koeffitsientlar bo'yicha yutilgan narsalardan olingan, shuning uchun siz bunday daraja uchun bunday virazdan tez-tez foydalana olmaysiz. Bundan tashqari, bizning birinchi dumbamiz ham o'zgartirilishi va asl virase (3n + 3), virase (3n) bilan almashtirilishi mumkin:
(3 x 0) + 0 = 0 = haqiqiylik yo'q (3 x 1) + 0 = 3 = 3-element (3 x 2) + 0 = 6 = 6-element va boshqalar.
Yak bachite, xuddi shunday natija, lekin siz "+3" yozishingiz shart emas. Biz virazda salbiy qiymatni ham topishimiz mumkin. Masalan, 4n-1:
(4 x 0) - 1 = -1 = haqiqiy emas (4 x 1) - 1 = 3 = uchinchi element (4 x 2) - 1 = 7 = 7 element va boshqalar.
N koeffitsienti uchun salbiy qiymatlar soni hayratlanarli darajada kichik ko'rinadi, chunki farq salbiy natijada topilmaydi. Ijobiy elementlarni qo'shish uchun siz doimo virusni o'zgartirishingiz kerak bo'ladi. Ma'lum bo'lishicha, bu pidkhid allaqachon birinchi n elementning aqlli tanlovi edi. Keling, "-n + 3" bilan dumbani ko'rib chiqaylik:
0 + 3 = 3 = 3-element -1 + 3 = 2 = 2-element -2 + 3 = 1 = 1-element -3 + 3 = 0 = haqiqiy emas
Krossbrauzer
nth-child 8-versiya kabi IEda mutlaq nol shponining orqasida, o'zaro brauzer bo'lsa ham, eng muhim atributlardan biridir. Binobarin, agar til yogo burilish haqida ketsa, natijada vizual effektning zanjirli olami (masalan, kuylash stolidagi qatorning roumingi) yuzaga keladi, demak u ideal pidhiddir. Ale, ehtimol, bir muhim narsa uchun yogo vikoristovuvat varto yo'q, Agar xususda mumkin, deb, masalan, tartibi to'g'riligi haqida.
Shubhasiz, agar siz jQuery-dan foydalansangiz, jQuery-ning Internet Explorer-da qanday ishlashi haqida tashvishlanishingiz shart emas.
Xo'sh, namkinets
Siz selektor uchun turli xil turlari bilan o'ynashingiz mumkin
Tavsif
:nth-child psevdo-sinfi element daraxtidagi raqamlash asosida uslub elementlari uchun oqlanadi.
Sintaksis
element:n-child(toq | juft |<число> | <выражение>) {...}
Qiymat
toq. Ulanmagan element raqamlari bo'lishi kerak. hatto mo'ylovli yigitlarda ham element raqamlari bor. Bolaning otasining bola elementining tartib raqami. Raqamlash 1 dan boshlanadi, shuning uchun u ro'yxatdagi birinchi element bo'ladi. viraz An+b sifatida o'rnating, bu erda a va b raqamlar, n esa avtomatik ravishda 0, 1, 2... qiymatini o'rnatadigan raqamdir.Agar a nolga teng bo'lsa, u yozilmaydi va yozuv b ga qisqartiriladi. Agar b nolga teng bo'lsa, u ham ko'rsatilmaydi va shaklda yoziladi. a va b manfiy sonlar bo'lishi mumkin, ba'zida ortiqcha belgisi minusga o'zgaradi, masalan: 5n-1.
Rahunka vykoristannya uchun a va b deakí salbiy qiymatlari salbiy yoki nolga teng bo'lishi mumkin. Biroq, elementlarning raqamlanishi 1 dan boshlanadiganlar orqali elementlarga ko'proq ijobiy qiymatlar qo'shiladi.
Stolda 1 ta kalit so'zlarni saralash mumkinligi taklif qilinadi, shuningdek, elementlarning raqamlari tayinlanishi ko'rsatilgan.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Nafta | 16 | 34 | 62 | 74 | 57 |
| Oltin | 4 | 69 | 72 | 56 | 47 |
| Yog'och | 7 | 73 | 79 | 34 | 86 |
| Toshlar | 23 | 34 | 88 | 53 | 103 |
Ushbu dumba uchun psevdo-sinf :nth-child stolning birinchi qatorining uslubini o'zgartiradi va barcha juft qatorlarning rang ko'rinishini ilhomlantiradi (1-rasm).
iPad
