: n-ti otrok - CSS-triki

Anonim

:nth-childIzbirnik omogoča, da izberete enega ali več elementov, ki se nanašajo na njihov izvor, da bi, v skladu s formulo.

/* 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) ( )

V specifikaciji CSS Selectors Level 3 je opredeljen kot "strukturni psevdorazred", kar pomeni, da se uporablja za oblikovanje vsebine glede na njen odnos z nadrejenimi in sorojenskimi elementi.

Recimo, da gradimo mrežo CSS in želimo odstraniti rob na vsakem četrtem modulu mreže. Tukaj je ta HTML:

 One Two Three Four Five

Namesto da razredu dodamo vsak četrti element (npr. .last), Lahko uporabimo :nth-child:

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

:nth-childIzbirnik strel argument: to je lahko ena celo število, ključne besede even, oddali formula. Če je določeno celo število, je izbran samo en element, vendar bodo ključne besede ali formula ponavljale vse podrejene elemente nadrejenega elementa in izbrale ujemajoče se elemente - podobno kot krmarjenje po elementih v matriki JavaScript. Ključni besedi "sodo" in "liho" sta enostavni (2, 4, 6 itd. Ali 1, 3, 5). Formula je sestavljena z uporabo sintakse an+b, kjer:

  • "A" je celoštevilska vrednost
  • "N" je dobesedna črka "n"
  • "+" Je operater in je lahko "+" ali "-"
  • "B" je celo število in je obvezno, če je v formulo vključen operator

Pomembno je vedeti, da je ta formula enačba in se ponavlja skozi vsak element brata ali sestre ter določa, kateri bo izbran. "N" del formule, če je vključen, predstavlja nabor naraščajočih pozitivnih celih števil (tako kot ponavljanje skozi matriko). V našem zgornjem primeru smo izbrali vsak četrti element s formulo 4n, ki je deloval, ker se je vsakič, ko je bil element preverjen, »n« povečal za eno (4 × 0, 4 × 1, 4 × 2, 4 × 3 itd.). Če se vrstni red elementa ujema z rezultatom enačbe, je izbran (4, 8, 12 itd.). Za podrobnejšo razlago matematike preberite ta članek.

Za nadaljnjo ponazoritev je tukaj nekaj primerov veljavnih :nth-childizbirnikov:

Na srečo vam ni treba vedno računati sami - tam je več :nth-childpreizkuševalcev in generatorjev:

  • CSS-Tricks Tester
  • Tester Lea Verou

: n-ti otrok (+ b)

Obstaja malo znan filter, ki ga lahko dodamo v :nth-childskladu s specifikacijo CSS Selectors: Sposobnost izbire :nth-childpodskupine elementov z uporabo of oblike. Recimo, da imate seznam mešane vsebine: nekateri imajo razred .video, nekateri razred .picturein želite izbrati prve 3 slike. To lahko storite s filtrom “of” tako:

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

Upoštevajte, da se to razlikuje od dodajanja izbirnika neposredno :nth-childizbirniku:

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

To lahko postane nekoliko zmedeno, zato lahko primer ponazori razliko:

Podpora brskalnika za filter »of« je zelo omejena: od tega pisanja je sintakso podpiral le Safari. Tukaj so odprta vprašanja, povezana s :nth-child(an+b of s):

  • Firefox: Podpora za nth-child (An + B of sel)
  • Chrome: Implementacija: nth-child (an + b of S)

Zanimivosti

  • :nth-childprehaja skozi elemente, začenši z vrha izvornega vrstnega reda. Edina razlika med njim in tem :nth-last-childje, da slednji ponavlja elemente, začenši z dna izvornega reda.
  • Sintaksa za izbiro prvega nštevila elementov je nekoliko kontraintuitivna. Začnete s -nplus pozitivnim številom elementov, ki jih želite izbrati. Izbere na primer li:nth-child(-n+3)prve 3 lielemente.
  • :nth-childSelektor je zelo podobna :nth-of-type, vendar z eno kritično razliko: da je manj natančna. V našem zgornjem primeru bi dali enak rezultat, ker ponavljamo samo .moduleelemente, če pa bi ponavljali bolj zapleteno skupino bratov in sester, :nth-childbi poskušali ujemati vse brate in sestre, ne samo brate in sestre iste vrste. To razkriva moč, da :nth-childlahko v dogovoru izbere kateri koli sorojeni element, ne le elementov, ki so podani pred dvopičjem.

Podpora za brskalnik

Chrome Safari Firefox Opera IE Android iOS
Kaj 3,2+ Kaj 9,5+ 9+ Kaj Kaj

:nth-childje bil uveden v modulu CSS Selectors 3, kar pomeni, da ga stare različice brskalnikov ne podpirajo. Vendar je sodobna podpora za brskalnike brezhibna, novi psevdo-izbirniki pa se pogosto uporabljajo v produkcijskih okoljih. Če potrebujete podporo za starejši brskalnik, bodisi polyfill za IE bodisi uporabite te izbirnike na nekritične načine - postopno izboljšanje, kar je priporočljivo.