: n -tais bērns - CSS-triki

Anonim

:nth-childSelektors ļauj izvēlēties vienu vai vairākus elementus, pamatojoties uz to avota, lai, saskaņā ar formulu.

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

CSS Selectors 3. līmeņa specifikācijā tas ir definēts kā “strukturāla pseidoklase”, kas nozīmē, ka to izmanto satura veidošanai, pamatojoties uz tā attiecībām ar vecāku un brāļu elementiem.

Pieņemsim, ka mēs veidojam CSS režģi un vēlamies noņemt rezervi katram ceturtajam tīkla modulim. Lūk, HTML:

 One Two Three Four Five

Tā vietā, lai pievienotu klasi katram ceturtajam vienumam (piemēram .last, mēs varam izmantot :nth-child:

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

:nth-childSelector ņem arguments: tas var būt viens vesels skaitlis, atslēgvārdiem even, oddvai formula. Ja ir norādīts vesels skaitlis, tiek atlasīts tikai viens elements, bet atslēgvārdi vai formula atkārtosies visos vecāka elementa pakārtotajos elementos un atlasīs atbilstošos elementus - līdzīgi kā navigācijā pa elementiem JavaScript masīvā. Atslēgvārdi “pāra” un “nepāra” ir vienkārši (attiecīgi 2, 4, 6 utt. Vai 1, 3, 5). Formula tiek veidota, izmantojot sintaksi an+b, kur:

  • “A” ir vesels skaitlis
  • “N” ir burtisks burts “n”
  • “+” Ir operators un var būt “+” vai “-”
  • “B” ir vesels skaitlis un ir nepieciešams, ja formulā ir iekļauts operators

Ir svarīgi atzīmēt, ka šī formula ir vienādojums un atkārtojas caur katru brāļa vai māsas elementu, nosakot, kurš tiks izvēlēts. Formulas “n” daļa, ja tā ir iekļauta, apzīmē pieaugošu pozitīvu veselu skaitļu kopu (tāpat kā iterējot caur masīvu). Iepriekš minētajā piemērā mēs atlasījām katru ceturto elementu ar formulu 4n, kas darbojās, jo katru reizi, kad elements tika pārbaudīts, “n” palielinājās par vienu (4 × 0, 4 × 1, 4 × 2, 4 × 3 utt.). Ja elementa secība sakrīt ar vienādojuma rezultātu, tas tiek izvēlēts (4, 8, 12 utt.). Lai iegūtu padziļinātu skaidrojumu par iesaistīto matemātiku, lūdzu, izlasiet šo rakstu.

Lai ilustrētu tālāk, šeit ir daži derīgu :nth-childatlasītāju piemēri :

Par laimi, jums ne vienmēr ir jāveic matemātika pašiem - tur ir vairāki :nth-childtestētāji un ģeneratori:

  • CSS-triku testeris
  • Lea Verou testētājs

: n-tas bērns (an + b no)

Ir maz pazīstams filtrs, kuru var pievienot :nth-childsaskaņā ar CSS Selectors specifikāciju: Iespēja atlasīt :nth-childelementu apakškopu, izmantojot of formātu. Pieņemsim, ka jums ir jaukta satura saraksts: dažiem ir klase .video, dažiem klase .pictureun jūs vēlaties atlasīt pirmos 3 attēlus. Jūs to varētu izdarīt, izmantojot filtru “of”, piemēram:

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

Ņemiet vērā, ka tas atšķiras no atlasītāja pievienošanas tieši :nth-childatlasītājam:

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

Tas var kļūt nedaudz mulsinošs, tāpēc piemērs var palīdzēt ilustrēt atšķirību:

Pārlūka atbalsts filtram “of” ir ļoti ierobežots: no šī raksta sintaksi atbalstīja tikai Safari. Lai pārbaudītu iecienītās pārlūkprogrammas statusu, šeit ir atklāti jautājumi, kas saistīti ar :nth-child(an+b of s):

  • Firefox: Atbalsts n -tajam bērnam (An + B no sel)
  • Chrome: ievietot: n-tas bērns (S + b + S)

Apskates vietas

  • :nth-childatkārtojas caur elementiem, sākot no avota secības augšdaļas. Vienīgā atšķirība starp to un :nth-last-childto, ka pēdējais atkārtojas caur elementiem, sākot no avota secības apakšas.
  • Pirmā nelementu skaita izvēles sintakse ir nedaudz pret intuitīvu. Jūs sākat ar -nplus pozitīvo elementu skaitu, kuru vēlaties atlasīt. Piemēram, li:nth-child(-n+3)atlasīs pirmos 3 lielementus.
  • :nth-childSelektors ir ļoti līdzīgs :nth-of-type, bet ar vienu būtisku atšķirību: tas ir tik īpašs. Iepriekš minētajā piemērā viņiem būtu tāds pats rezultāts, jo mēs atkārtojam tikai .moduleelementus, bet, ja mēs atkārtotu sarežģītāku brāļu un māsu grupu, mēs :nth-childmēģinātu saskaņot visus brāļus un māsas, ne tikai tāda paša elementa brāļus un māsas. Tas atklāj spēku, :nth-childka izkārtojumā var izvēlēties jebkuru brāļa vai brāļa elementu, ne tikai tos elementus, kas norādīti pirms kols.

Pārlūka atbalsts

Chrome Safari Firefox Opera IE Android iOS
Jebkurš 3.2+ Jebkurš 9,5+ 9+ Jebkurš Jebkurš

:nth-childtika ieviests CSS selektoru 3. modulī, kas nozīmē, ka vecās pārlūkprogrammu versijas to neatbalsta. Tomēr mūsdienu pārlūka atbalsts ir nevainojams, un jaunie pseido-selektori tiek plaši izmantoti ražošanas vidēs. Ja jums ir nepieciešams vecāks pārlūka atbalsts, vai nu IE polifill, vai arī izmantojiet šos atlasītājus nekritiskos veidos, kas ir ieteicami pakāpeniski.