: niende barn - CSS-triks

Den :nth-childVelgeren gjør det mulig å velge ett eller flere elementer basert på deres kilde rekkefølge, i henhold til en formel.

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

Det er definert i CSS Selectors Level 3-spesifikasjonen som en "strukturell pseudoklasse", noe som betyr at den brukes til å style innhold basert på forholdet til foreldre og søskenelementer.

Anta at vi bygger et CSS-nett, og vil fjerne marginen på hver fjerde nettmodul. Her er den HTML:

 One Two Three Four Five 

I stedet for å legge til en klasse til hvert fjerde element (f.eks. .last), Kan vi bruke :nth-child:

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

Den :nth-childvelger tar et argument: dette kan være en enkelt heltall, ordene even, oddeller en formel. Hvis et heltall er spesifisert, blir bare ett element valgt, men nøkkelordene eller en formel vil gjenta gjennom alle barna til det overordnede elementet og velge samsvarende elementer - i likhet med navigeringselementer i en JavaScript-matrise. Nøkkelord "jevn" og "merkelig" er greie (henholdsvis 2, 4, 6 osv. Eller 1, 3, 5). Formelen er konstruert ved hjelp av syntaksen an+b, der:

• “A” er en heltallverdi
• "N" er den bokstavelige bokstaven "n"
• “+” Er en operatør og kan være enten “+” eller “-”
• “B” er et heltall og kreves hvis en operator er inkludert i formelen

Det er viktig å merke seg at denne formelen er en ligning, og den går gjennom hvert søskenelement og bestemmer hvilken som skal velges. “N” -delen av formelen, hvis den er inkludert, representerer et sett med økende positive heltall (akkurat som å gjenta det gjennom en matrise). I vårt eksempel ovenfor valgte vi hvert fjerde element med formelen 4n, som fungerte fordi hver gang et element ble sjekket, økte “n” med ett (4 × 0, 4 × 1, 4 × 2, 4 × 3, etc). Hvis rekkefølgen til et element samsvarer med resultatet av ligningen, blir den valgt (4, 8, 12 osv.). For en mer inngående forklaring på matematikken som er involvert, vennligst les denne artikkelen.

For å illustrere videre, her er noen eksempler på gyldige :nth-childvelgere:

Heldigvis trenger du ikke alltid å gjøre matte selv - det er flere :nth-childtestere og generatorer der ute:

• CSS-Tricks Tester
• Lea Verous tester

: nth-child (an + b of)

Det er et lite kjent filter som kan legges til i :nth-childhenhold til CSS Selectors spesifikasjon: Muligheten til å velge :nth-childen delmengde av elementer ved hjelp av of formatet. Anta at du har en liste over blandet innhold: Noen har klassen .video, noen har klassen .picture, og du vil velge de tre første bildene. Du kan gjøre det med "av" -filteret slik:

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

Merk at dette skiller seg fra å legge en velger direkte til :nth-childvelgeren:

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

Dette kan bli litt forvirrende, så et eksempel kan være med på å illustrere forskjellen:

Nettleserstøtte for “of” -filteret er svært begrenset: I skrivende stund støttet bare Safari syntaksen. For å sjekke statusen til favorittleseren din, er det åpne problemer knyttet til :nth-child(an+b of s):

• Firefox: Støtte for nth-child (An + B of sel)
• Chrome: Redskap: nth-child (an + b of S)

Interessepunkt

• :nth-childdet går gjennom elementer som starter fra toppen av kildearrangementet. Den eneste forskjellen mellom det og :nth-last-childer at sistnevnte itererer gjennom elementer som starter fra bunnen av kildearrangementet.
• Syntaksen for å velge det første nantallet elementer er litt kontraintuitiv. Du begynner med -n, pluss det positive antallet elementer du vil velge. Vil for eksempel li:nth-child(-n+3)velge de tre første lielementene.
• Den :nth-childvelgeren er svært lik :nth-of-type, men med en viktig forskjell: det er mindre spesifikk. I eksemplet vårt ovenfor ville de produsere det samme resultatet fordi vi bare itererer over .moduleelementer, men hvis vi gjentok oss over en mer sammensatt gruppe søsken, :nth-childville vi prøve å matche alle søsken, ikke bare søsken av samme elementtype. Dette avslører kraften til :nth-child- det kan velge hvilket som helst søskenelement i en ordning, ikke bare elementer som er spesifisert før kolon.

Nettleserstøtte

Chrome	Safari	Firefox	Opera	DVS	Android	iOS
Noen	3.2+	Noen	9.5+	9+	Noen	Noen

:nth-childble introdusert i CSS Selectors Module 3, som betyr at gamle versjoner av nettlesere ikke støtter det. Imidlertid er moderne nettleserstøtte upåklagelig, og de nye pseudovelgerne er mye brukt i produksjonsmiljøer. Hvis du trenger eldre nettleserstøtte, kan du enten fylle ut for IE, eller bruke disse velgerne på ikke-kritiske måter, på en progressiv forbedring, noe som anbefales.