također se može prebrojati, a njegov redni broj bit će treći (treće dijete svog roditelja ). Za stiliziranje ovih elemenata trebamo koristiti pseudo klasu :n-to dijete.

Prijeđimo na primjer:

Prvo h2 zaglavlje oznake tijela

• jedan
• dva
• tri

Drugi h2 naslov oznake tijela

:n-to dijete stilizirali smo elemente

I

, koji imaju određeni redni podređeni element unutar svojih roditeljskih elemenata.

Rezultat našeg primjera:

Stiliziranje prema ključnoj riječi

Kao pseudoklasna vrijednost :nth-child() može biti ne samo serijski broj podređenih elemenata koje je potrebno stilizirati, već i ključne riječi koje mogu definirati cijelu grupu elemenata. Ključna riječ može imati dva značenja:

• parni (parni elementi)
• neparan (neparni elementi)

Stiliziranje elemenata pomoću ključnih riječi ima vrlo široku primjenu jer možete jednostavno odabrati i stilizirati parne ili neparne podređene elemente u dokumentu.

Stvorimo dvije jednostavne tablice s različitim stilskim klasama kao primjer i vizualizirajmo razliku u korištenju vrijednosti ključne riječi pseudoklase :n-to dijete za HTML element koji definira red tablice:

Vrijednost čak (parno)

1 redak	Položaj	Količina
2 linija
3 linija
4 linija
5 linija

Vrijednost ak

1 redak	Položaj	Količina
2 linija
3 linija
4 linija
5 linija

U ovom primjeru korištenje pseudo klase :nth-child() stilizirali smo čak redovi prve tablice (elementi ) I neparan u drugoj tablici.

Stiliziranje pomoću jednostavne matematičke formule

Pseudoklasa :nth-child() omogućuje odabir ne samo parnih, neparnih ili podređenih elemenata s određenim rednim brojem, već i podređenih elemenata navedenih elementarnom matematičkom formulom. Pogledajmo sljedeći birač i shvatimo što ovaj unos znači:

td:nth-child(4n+2)

) unutar retka, počevši od druge ćelije tablice, bit će stilizirano:

• 4n– svaki četvrti element.
• 2

U formulama je moguće koristiti vrijednosti sa znakom oduzimanja, ali to obično nije potrebno:

td:nth-child(4n-1)( boja pozadine: svijetloplava; /* postavite boju pozadine */ )

Ovaj birač znači da svaka četvrta ćelija tablice ( ) unutar retka, počevši od treće ćelije tablice (nema ćelije -1 iz objektivnih razloga, pa dolazi do pomaka ulijevo), stilizirat će se:

• 4n– svaki četvrti element.
• -1 – od kojeg elementa započeti.

Pogledajmo primjer upotrebe:

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

U ovom primjeru, koristeći pseudo-class:nth-child, odabrali smo i stilizirali svaku četvrtu ćeliju tablice ( ) unutar retka, počevši od druge ćelije tablice. Rezultat našeg primjera:

basicweb.ru

Kako radi CSS selektor nth-child

U CSS-u postoji selektor, točnije pseudo-selektor, koji se zove nth-child. Primjer njegove upotrebe:

Ul li:nth-child(3n+3) ( boja: #ccc; )

Gore navedeni CSS čini sljedeće: Primjenjuje stil na svaku treću stavku na neuređenom popisu. Naime 3., 6., 9., 12. itd. Ali kako to funkcionira? Također, koje se prednosti mogu dobiti korištenjem nth-child?

Glavno značenje je u izrazu u zagradi. nth-child prihvaća dvije ključne riječi: čak(čak) i neparan(neparan). Njihovo značenje je potpuno jasno. Par odabire parne elemente (2, 4, 6), nepar odabire neparne elemente (1, 3, 5).

Kao što je prikazano u gornjem primjeru, nth-child može obraditi izraze. Koji je najjednostavniji mogući izraz? Samo broj. Ako napišete bilo koji broj u zagradi, bit će odabran jedan jedini element. Na primjer, odaberimo peti element popisa:

Ul li:nth-child(5) ( boja: #ccc; )

Vratimo se našem prvom primjeru, u kojem smo koristili izraz (3n+3). Kako on radi? Zašto odabire svaki treći element? Cijela poanta je u varijabli n. Prihvaća cjelobrojne vrijednosti od nule pa naviše. Pogledajmo pobliže:

(3 x 0) + 3 = 3 = 3. element (3 x 1) + 3 = 6 = 6. element (3 x 2) + 3 = 9 = 9. element itd.

Sada pokušajmo sa sljedećim izrazom: nth-child(2n+1) :

(2 x 0) + 1 = 1 = 1. element (2 x 1) + 1 = 3 = 3. element (2 x 2) + 1 = 5 = 5. element itd.

Kao rezultat, dobili smo istu stvar kao u slučaju odd , tako da nema potrebe često koristiti takav izraz. Štoviše, naš prvi primjer također se može pojednostaviti i koristiti umjesto izvornog izraza (3n+3), izraz (3n):

(3 x 0) + 0 = 0 = nema podudaranja (3 x 1) + 0 = 3 = 3. element (3 x 2) + 0 = 6 = 6. element itd.

Kao što vidite, rezultat je isti, ali ne morate pisati "+3". Također možemo koristiti negativne vrijednosti u izrazu. Na primjer, 4n-1:

(4 x 0) - 1 = -1 = nema podudaranja (4 x 1) - 1 = 3 = 3. element (4 x 2) - 1 = 7 = 7. element itd.

Korištenje negativnih vrijednosti za koeficijent n izgleda pomalo čudno, jer ako je rezultat negativan, neće se pronaći podudaranje. Morat ćete stalno mijenjati izraz kako biste dodali pozitivne elemente. Kako se pokazalo, ovaj pristup je vrlo prikladan za odabir prvih n elemenata. Pogledajmo primjer s "-n+3":

0 + 3 = 3 = 3. element -1 + 3 = 2 = 2. element -2 + 3 = 1 = 1. element -3 + 3 = 0 = nema podudaranja

Kompatibilnost s različitim preglednicima

nth-child je jedan od onih nesretnih atributa koji je potpuno cross-browser, osim apsolutne nule u IE-u, čak i verzije 8. Stoga, kada je riječ o korištenju, ako je očekivani rezultat nekakav vizualni efekt (primjerice bojanje redaka određene tablice), onda je ovo idealan pristup. Ali vjerojatno ga ne biste trebali koristiti za nešto važnije što bi moglo utjecati, na primjer, na ispravnost izgleda.

Naravno, ako koristite jQuery, onda ne morate brinuti o tome, budući da jQuery radi čak iu Internet Exploreru.

I konačno

Možete se igrati s različitim izrazima selektora na stranici primjera.

www.css-tricks.ru

Vrijednosti

Značenje	Opis
Broj	Pozitivan broj počevši od 1. Određuje broj elementa kojem želimo pristupiti. Numeriranje elemenata počinje od 1.
neparan	Čudni elementi.
čak	Čak i elementi.
Izraz	Možete kreirati posebne izraze sa slovom n, koje označava sve cijele brojeve iz nula (ne od jedan!) do beskonačnosti. Dakle, 2n označava sve parne brojeve (počevši od drugog). Kako ovo razumjeti? Zamjenjujemo brojeve od 0 u n sekvencijalno i tako dalje: ako je n = 0, tada će 2n dati 0 - ne postoji takav element ( numeriranje elemenata počevši od 1!), ako je n = 1, tada 2n daje 2 - drugi element, ako je n = 2, 2n daje 4 - četvrti element. Ako napišete 3n, to će biti svaki treći element (počevši od trećeg!), i tako dalje.

Primjeri

Primjer

U ovom primjeru, crvenom ćemo učiniti boju li, što je 4. potomak njegov roditelj (4. unutar ol):

Rezultat izvršavanja koda:

Primjer

Sada sve zacrvenimo čak li:

Rezultat izvršavanja koda:

Primjer

Sada sve zacrvenimo neparan li:

Rezultat izvršavanja koda:

Primjer

Sada ga učinimo crvenim svaki treći li (počevši od trećeg):

Rezultat izvršavanja koda:

Primjer

Selektor može specificirati niz elemenata. Recimo da imate popis od 20 elemenata i trebate odabrati elemente od 7 do uključivo 14. Možete to učiniti ovako:

Rezultat izvršavanja koda:

kod.mu

Sintaksa

Pseudoklasa nth-child navedena je s jednim argumentom, koji predstavlja obrazac za podudaranje elemenata.

Vrijednosti ključnih riječi

neparan Predstavlja elemente čija je brojčana pozicija u nizu braće i sestara neparna: 1, 3, 5, itd. even Predstavlja elemente čija je numerička pozicija u nizu braće i sestara parna: 2, 4, 6, itd.

Funkcionalna notacija

Predstavlja elemente čija se numerička pozicija u nizu braće i sestara podudara s uzorkom An+B, za svaki pozitivni cijeli broj ili nultu vrijednost od n. Indeks prvog elementa je 1. Vrijednosti A i B moraju biti obje s.

Formalna sintaksa

:n-to dijete( [od ]?)

gdje
= čak i neparan
=

gdje
=

gdje
=
= ">" " " "~" " "

gdje
=

Postoji takav selektor, ili bolje rečeno pseudo-klasa, koja se zove:nth-child . Evo primjera njegove upotrebe:

UL LI:nth-child(3n+3) (boja:#CCC; )

Što radi gornji CSS kod? Odabire svaki treći element unutar popisa s grafičkim oznakama: to je 3., 6., 9., 12. itd. Pogledajmo kako točno ovaj izraz radi i što još možete učiniti s :nth-child.

Sve ovisi o tome što je između zagrada. Selektor:nth-child prihvaća dvije ključne riječi: even i odd. Ovdje je sve jednostavno: par odabire parne elemente, kao što su 2., 4., 6. itd., a neparan odabire neparne elemente, kao što su 1., 3., 5. itd. d.

Kao što možete vidjeti iz prvog primjera, :nth-child također uzima izraze kao parametre. Uključujući najjednostavnije jednadžbe, drugim riječima, samo brojeve. Ako ih stavite u zagrade, bit će odabran samo jedan element s odgovarajućim brojem. Na primjer, evo kako odabrati samo peti element:

UL LI:nth-child(5) ( boja:#CCC; )

Ipak, vratimo se na 3n+3 iz prvog primjera. Kako radi i zašto je odabran svaki treći element? Trik je razumjeti varijablu n i danu algebarsku jednadžbu. Zamislite n kao skup cijelih brojeva temeljen na nuli. Zatim dovršite jednadžbu. Dakle, 3n je 3×n, a cijela jednadžba zajedno je (3×n)+3. Sada, zamjenjujući brojeve veće ili jednake nuli umjesto n, dobivamo:

• (3 × 0) + 3 = 3 = 3. element
• (3 × 1) + 3 = 6 = 6. element
• (3 × 2) + 3 = 9 = 9. element, itd.

Što je s:nth-child(2n+1)?

• (2 × 0) + 1 = 1 = 1. element
• (2 × 1) + 1 = 3 = 3. element
• (2 × 2) + 1 = 5 = 5. element, itd.

U redu, stani! Ovo je isto što i neparno. Onda možda ne bismo trebali koristiti ovaj izraz? Ali ne kompliciramo li onda previše naš prvi primjer? Što ako umjesto 3n+3 napišemo 3n+0 ili još jednostavnije 3n?

• (3 × 0) = 0 = ništa
• (3 × 1) = 3 = 3. element
• (3 × 2) = 6 = 6. element
• (3 × 3) = 9 = 9. element, itd.

Dakle, kao što vidite, rezultat će biti isti, što znači da nema potrebe za +3. Negativne vrijednosti n možemo koristiti jednako dobro kao i oduzimanje u jednadžbama. Na primjer, 4n-1:

• (4 × 0) – 1 = –1 = ništa
• (4 × 1) – 1 = 3 = 3. element
• (4 × 2) – 1 = 7 = 7. element itd.

Korištenje -n može se činiti čudnim - nakon svega, ako je konačni rezultat negativan, nijedan element neće biti uključen u odabir. Ali ako dodate u jednadžbu i ponovno učinite rezultat pozitivnim, uzorak će se pokazati prilično zanimljivim: uz njegovu pomoć možete dobiti prvih n elemenata, na primjer ovako: -n+3:

• –0 + 3 = 3 = 3. element
• –1 + 3 = 2 = 2. element
• –2 + 3 = 1 = 1. element
• –3 + 3 = 0 = ništa, itd.

SitePoint ima lijepu referencu s lijepim znakom koju ću besramno objaviti ovdje:

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	–

Podrška za preglednik

Selektor:nth-child jedan je od rijetkih CSS selektora koji je gotovo u potpunosti podržan u modernim preglednicima i nema apsolutno nikakvu podršku u IE-u, čak ni u IE8. Dakle, kada je u pitanju njegova upotreba, a krajnji rezultat je napravljen korištenjem tehnologije progresivnog poboljšanja, možete ga sigurno koristiti za neke elemente dizajna, poput bojanja redaka tablice. Međutim, ne smije se koristiti u ozbiljnijim slučajevima. Na primjer, oslanjanje na njega u izgledu web-mjesta ili uklanjanje desne margine sa svakog trećeg bloka u mreži tri puta tri kako bi stali u red.

Opis

Pseudoklasa :nth-child koristi se za dodavanje stila elementima na temelju numeriranja u stablu elemenata.

Sintaksa

element:nth-child(odd | even |<число> | <выражение>) {...}

Vrijednosti

neparni Svi neparni brojevi elemenata. parni Svi parni elementi. broj Redni broj podređenog elementa u odnosu na njegovog roditelja. Numeriranje počinje od 1, ovo će biti prvi element na popisu. izraz Zadan kao an+b, gdje su a i b cijeli brojevi, a n je brojač koji automatski uzima vrijednost 0, 1, 2...

Ako je a nula, tada se ne piše i unos se skraćuje na b. Ako je b nula, tada također nije navedeno i izraz se piše u obliku an . a i b mogu biti negativni brojevi, u ovom slučaju znak plus mijenja se u minus, na primjer: 5n-1.

Korištenjem negativnih a i b vrijednosti, neki rezultati također mogu biti negativni ili nula. Međutim, na elemente utječu samo pozitivne vrijednosti zbog numeriranja elemenata koji počinju s 1.

U tablici 1 prikazuje neke moguće izraze i ključne riječi, a također pokazuje koji će se brojevi elemenata koristiti.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Ulje	16	34	62	74	57
Zlato	4	69	72	56	47
Drvo	7	73	79	34	86
Kamenje	23	34	88	53	103

U u ovom primjeru Pseudoklasa :nth-child koristi se za promjenu stila prvog retka tablice, kao i za isticanje svih redaka s parnim brojevima (Slika 1).

CSS nth-child je pseudoklasa koja se koristi za odabir elemenata pomoću numeričkog izraza. Njegova se sintaksa na prvi pogled može činiti pomalo zbunjujućom.

U ovom ćemo članku pogledati:

• različiti načini korištenja :nth-child ;
• fleksibilniji selektor :nth-od-type ;
• i pridruženi selektori :nth-last-child i :nth-last-of-type .

:nth-posljednji-od-vrste

:nth-last-of-type odabire podređene elemente ako njihov položaj u dokumentu odgovara uzorku opisanom algebarskim izrazom.

Selektor :nth-last-of-type izgleda otprilike ovako:

li:n-to dijete(izraz); ()

"Izraz" se može predstaviti ključnim riječima čak ili nepar, cijelim brojem ili formulom poput an+b, gdje su a i b cijeli brojevi, pozitivni ili negativni.

Budući da se pseudoklasa CSS nth dijete može koristiti za odabir niza različitih elemenata. Pogledajmo nekoliko primjera da stvari budu jasnije.

imam popis s grafičkim oznakama od 12 elemenata. Pogledajmo kako možemo koristiti :nth-child za odabir određenog elementa ili skupa elemenata na temelju uzorka:

• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum
• lorem ipsum

Za odabir trećeg elementa popisa morate navesti li:nth-child(3) . Za odabir svih parnih elemenata možete koristiti ključnu riječ even. Suprotno tome, možete koristiti :nth-child(odd) za odabir svih neparnih elemenata.

CSS n-ti dijete svaki treći - navedite li:nth-child(3n) . Za odabir prva četiri elementa upotrijebite li:nth-child(-n+4) . Za odabir svih osim prva četiri elementa, možete koristiti li:nth-child(n+5) .

Izraz an + b

Alternativa za korištenje ključna riječ neparan koristi izraz 2n+1 . Ali kako to funkcionira?

Kada izraz u formatu an+b sadrži vrijednosti a i b različite od nule, djeca se dijele u grupe. Ako je izraz 2n+1, djeca se dijele u grupe po dvoje. Svakom elementu u grupi dodijeljen je indeks, počevši od 1. Odgovarajući element u svakoj skupini je indeksni broj b. U našem primjeru, ovo će biti prvi element.

Ako je izraz 3n+2, elementi su grupirani u grupe od po tri, a drugi element u svakoj grupi odgovara izrazu.

Ako je b negativan, odgovarajući element u grupi je element s indeksom b. Ali se broji u suprotnom smjeru od indeksa 1. U tom slučaju, odgovarajući element neće pripadati ovoj skupini, već prethodnoj skupini.

Parna ključna riječ u CSS-u nth child može se izraziti kao 2n. U ovom slučaju nemamo vrijednost za b, tako da je odabran svaki element grupe s indeksom a; 2n odabire svaki drugi element, 3n odabire svaki treći, 4n odabire svaki četvrti, i tako dalje.

Osobno smatram da je koncept razbijanja podređenih elemenata u grupe i pronalaženje odgovarajućeg indeksa za svaku grupu vrlo zbunjujući. Iako ih specifikacija CSS selektora upravo tako opisuje.

Više volim koncept traženja svakog n-tog elementa - svakog 2., 3. ili 4., itd. I onda mi je lakše zamisliti da je drugi dio izraza pomak.

U slučaju 2n+1 ovaj izraz čitam na sljedeći način: " Pronađite svaki drugi element i pomaknite odabir prema dolje za 1».

Ako je izraz 3n-5, glasit će ovako: " Pronađite svaki treći element i pomaknite odabir prema gore za 5».

Ostali selektori: n-to dijete

:nth-child ima odgovarajuću pseudo-klasu :nth-last-child koja radi suprotno.

li:nth-last-child(3n) počinje od posljednjeg djeteta i radi unatrag, podudarajući se sa svakim trećim elementom s kraja liste.

Ova pseudoklasa je rjeđa. Međutim, često je potrebno izabrati prvo ili zadnje element djeteta. To se može učiniti pomoću :nth-child(1) ili :nth-last-child(1), ali ova metoda nije tako uobičajena kao :first-child i :last-child pseudoklase. Međutim, samo :first-child radi u IE8, ali :last-child i :nth selektori ne.

:nti-od-tipa

Ono što me često smeta je da CSS n-ta pseudoklasa dijete odabire elemente djeteta prema indeksu i ne uzima u obzir tip elementa.

Razmotrite sljedeći primjer.

lorem ipsum;

Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nunc sed turpis. Donec posuere vulputate arcu;

Postoji dio s naslovom, podnaslovom i nekoliko odlomaka. Želim malo istaknuti prvi odlomak s većom veličinom slova od 1,5 em.

Možete pokušati upotrijebiti odjeljak p:first-child , budući da morate dodati dodatni stil prvom odlomku u tom odjeljku. Ali ovo neće raditi jer je prvi podređeni element odjeljka h1. U ovom slučaju morate koristiti selektor :prvi od tipa.

postoji cijela linija Selektori za ovu vrstu su :first-of-type , :last-of-type , :nth-of-type i :nth-last-of-type . Ponašaju se isto kao :nth-child, ali odabiru n-tu instancu elemenata određene vrste.