: n-to dijete - CSS-trikovi

:nth-childSelektor omogućuje odabir jednog ili više elemenata koji se temelje na njihovom izvoru kako bi, u skladu s formulom.

/* Select the first list item */ li:nth-child(1) ( ) /* Select the 5th list item */ li:nth-child(5) ( ) /* Select every other list item starting with first */ li:nth-child(odd) ( ) /* Select every 3rd list item starting with first */ li:nth-child(3n - 2) ( ) /* Select every 3rd list item starting with 2nd */ li:nth-child(3n - 1) ( ) /* Select every 3rd child item, as long as it has class "el" */ .el:nth-child(3n) ( )

U specifikaciji CSS Selectors Level 3 definiran je kao „strukturna pseudo-klasa“, što znači da se koristi za oblikovanje sadržaja na temelju odnosa s roditeljskim i bratskim elementima.

Pretpostavimo da gradimo CSS mrežu i želimo ukloniti marginu na svakom četvrtom modulu mreže. Evo tog HTML-a:

 One Two Three Four Five 

Umjesto da dodamo klasu svakoj četvrtoj stavci (npr. .last), Možemo koristiti :nth-child:

.module:nth-child(4n) ( margin-right: 0; )

:nth-childSelektor uzima jedan argument: to može biti jedan cijeli broj, ključne riječi even, oddili formula. Ako je naveden cijeli broj, odabran je samo jedan element, ali ključne riječi ili formula prelazit će kroz sve podređene dijelove nadređenog elementa i odabrati odgovarajuće elemente - slično navigaciji stavkama u JavaScript nizu. Ključne riječi "parno" i "neparno" izravne su (2, 4, 6 itd. Ili 1, 3, 5). Formula je konstruirana koristeći sintaksu an+b, gdje:

• "A" je cijela vrijednost
• "N" je doslovno slovo "n"
• "+" Je operator i može biti ili "+" ili "-"
• "B" je cijeli broj i potreban je ako je operator uključen u formulu

Važno je napomenuti da je ova formula jednadžba i ponavlja se kroz svaki element braće i sestara, određujući koji će biti odabran. "N" dio formule, ako je uključen, predstavlja skup rastućih pozitivnih cijelih brojeva (baš poput ponavljanja kroz niz). U našem gornjem primjeru odabrali smo svaki četvrti element s formulom 4n, koji je radio jer je svaki put kada se element provjeravao, "n" se povećavao za jedan (4 × 0, 4 × 1, 4 × 2, 4 × 3 itd.). Ako se redoslijed elementa podudara s rezultatom jednadžbe, on se odabire (4, 8, 12 itd.). Za detaljnija objašnjenja matematike pročitajte ovaj članak.

Za daljnju ilustraciju evo nekoliko primjera valjanih :nth-childselektora:

Srećom, ne morate uvijek sami računati - postoji nekoliko :nth-childtestera i generatora:

• CSS-Tester Tester
• Tester Lea Veroua

: n-to dijete (+ b)

Postoji malo poznati filtar kojem se može dodati :nth-childprema specifikaciji CSS Selectors: Mogućnost odabira :nth-childpodskupa elemenata, koristeći of format. Pretpostavimo da imate popis miješanog sadržaja: neki imaju razred .video, neki razred .picture, a vi želite odabrati prve 3 slike. To možete učiniti s filterom "of" na sljedeći način:

:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )

Imajte na umu da se to razlikuje od dodavanja selektora izravno :nth-childselektoru:

.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )

To može postati malo zbunjujuće, pa bi primjer mogao ilustrirati razliku:

Podrška preglednika za filtar “of” vrlo je ograničena: od ovog pisanja sintaksu je podržavao samo Safari. Da biste provjerili status svog omiljenog preglednika, ovdje su otvorena pitanja u vezi sa :nth-child(an+b of s):

• Firefox: Podrška za n-dijete (An + B od sel)
• Chrome: Implementacija: nth-child (an + b of S)

Točke interesa

• :nth-childponavlja kroz elemente počevši od vrha izvornog poretka. Jedina razlika između njega i toga :nth-last-childje što se ovaj ponavlja kroz elemente počevši od dna izvornog poretka.
• Sintaksa za odabir prvog nbroja elemenata pomalo je kontra-intuitivna. Započinjete s -nplus pozitivnim brojem elemenata koje želite odabrati. Na primjer, li:nth-child(-n+3)odabrat će prva 3 lielementa.
• :nth-childSelektor je vrlo slična :nth-of-type, ali s jednom kritičnom razlika: to je manje specifičan. U našem primjeru gore dali bi isti rezultat, jer mi ponavljamo samo .moduleelemente, ali ako bismo ponavljali složeniju skupinu braće i sestara, :nth-childpokušali bi podudarati svu braću i sestre, a ne samo braću i sestre iste vrste elemenata. To otkriva snagu :nth-child-it može odabrati bilo koji element brata ili sestre u aranžmanu, ne samo elemente koji su navedeni prije dvotočke.

Podrška preglednika

Krom	Safari	Firefox	Opera	IE	Android	iOS
Bilo koji	3,2+	Bilo koji	9,5+	9+	Bilo koji	Bilo koji

:nth-childuveden je u CSS Selectors Module 3, što znači da ga stare verzije preglednika ne podržavaju. Međutim, moderna podrška za preglednike je besprijekorna, a novi pseudo-selektori široko se koriste u proizvodnim okruženjima. Ako vam je potrebna starija podrška za preglednik, ili polifil za IE, ili ove selektore koristite na nekritične načine, progresivno poboljšanje, što se preporučuje.