: n-tipa - CSS-trikovi

Anonim

:nth-of-typeSelektor omogućuje odabir jednog ili više elemenata koji se temelje na njihovom izvoru kako bi, u skladu s formulom. 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 imamo neuređeni popis i da želimo "zebra-prugu" izmjenjivati ​​stavke popisa:



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

Umjesto dodavanja klasa u svaku stavku popisa (npr. .even& .odd) Možemo koristiti :nth-of-type:

li ( background: slategrey; ) /* select alternating items starting with the second item */ li:nth-of-type(2n) ( background: lightslategrey; )

Kao što vidite, :nth-of-typeuzima argument: to može biti jedan cijeli broj, ključne riječi "paran" ili "neparan" ili formula kao što je gore prikazano. Ako je naveden cijeli broj, odabran je samo jedan element, ali ključne riječi ili formula će se itirirati kroz sve podređene dijelove nadređenog elementa i odabrati odgovarajuće elemente, slično navigacijskim stavkama u polju u JavaScript-u. Ključne riječi "parno" i "neparno" izravne su, ali 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 drugi element s formulom 2n, koji je radio, jer se svaki put kada se element provjerava, "n" povećavao za jedan (2 × 0, 2 × 1, 2 × 2, 2 × 3 itd.). Ako se redoslijed elementa podudara s rezultatom jednadžbe, on se odabire (2, 4, 6 itd.). Za detaljnija objašnjenja matematike pročitajte ovaj članak.

Za daljnju ilustraciju evo nekoliko primjera valjanih :nth-of-typeselektora:

Pogledajte ovu olovku!

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

  • CSS-Tester Tester
  • Tester Lea Veroua

Točke interesa

  • :nth-of-typeponavlja kroz elemente počevši od vrha izvornog poretka. Jedina razlika između njega i toga :nth-last-of-typeje što se ovaj ponavlja kroz elemente počevši od dna izvornog poretka.
  • :nth-of-typeSelektor je vrlo slična :nth-child, ali s jednom kritičnom razlika: to je više specifičan. U našem primjeru gore dali bi isti rezultat, jer mi ponavljamo samo lielemente, 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. Ovo otkriva snagu :nth-of-type-it cilja određenu vrstu elementa u aranžmanu u odnosu na sličnu braću i sestre, a ne na svu braću i sestre.

Podrška preglednika

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

:nth-of-typeuveden 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.