Den :nth-childvælgeren giver dig mulighed for at vælge et eller flere elementer baseret på deres kilde ordre, ifølge 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 defineret i CSS Selectors niveau 3-spec som en "strukturel pseudoklasse", hvilket betyder at den bruges til at style indhold baseret på dets forhold til forældre og søskendeelementer.
Antag, at vi bygger et CSS-gitter og vil fjerne margenen på hvert fjerde gittermodul. Her er den HTML:
One Two Three Four Five I stedet for at tilføje en klasse til hvert fjerde element (f.eks. .last) Kan vi bruge :nth-child:
.module:nth-child(4n) ( margin-right: 0; )Den :nth-childvælgeren tager et argument: det kan være en enkelt heltal, nøgleordene even, oddeller en formel. Hvis der er angivet et heltal, vælges kun et element, men nøgleordene eller en formel gentager alle forældreelementets børn og vælger matchende elementer - svarende til navigeringselementer i et JavaScript-array. Nøgleordene "lige" og "ulige" er ligetil (henholdsvis 2, 4, 6 osv. Eller 1, 3, 5). Formlen er konstrueret ved hjælp af syntaksen an+b, hvor:
- “A” er en heltalsværdi
- "N" er bogstavet "n"
- “+” Er en operatør og kan enten være “+” eller “-”
- “B” er et heltal og kræves, hvis en operator er inkluderet i formlen
Det er vigtigt at bemærke, at denne formel er en ligning, og den går igennem hvert søskendeelement og bestemmer, hvilken der skal vælges. “N” -delen af formlen, hvis den er inkluderet, repræsenterer et sæt stigende positive heltal (ligesom det gentages gennem en matrix). I vores ovenstående eksempel valgte vi hvert fjerde element med formlen 4n, som fungerede, fordi hver gang et element blev kontrolleret, steg "n" med et (4 × 0, 4 × 1, 4 × 2, 4 × 3 osv.). Hvis et elements rækkefølge matcher resultatet af ligningen, bliver det valgt (4, 8, 12 osv.). For en mere detaljeret forklaring af den involverede matematik, bedes du læse denne artikel.
For at illustrere yderligere er her nogle eksempler på gyldige :nth-childvælgere:
Heldigvis behøver du ikke altid lave matematikken selv - der er flere :nth-childtestere og generatorer derude:
- CSS-Tricks Tester
- Lea Verous tester
: niende barn (an + b af)
Der er et lite kendt filter, der kan tilføjes til i :nth-childhenhold til CSS Selectors specifikation: Evnen til at vælge et :nth-childaf en undersæt af elementer ved hjælp af of formatet. Antag at du har en liste over blandet indhold: Nogle har klassen .video, andre har klassen .picture, og du vil vælge de første 3 billeder. Du kan gøre det med "af" -filteret som sådan:
:nth-child(-n+3 of .picture) ( /* Selects the first 3 elements applied not to ALL children but only to those matching .picture */ )Bemærk, at dette adskiller sig fra at tilføje en vælger direkte til :nth-childvælgeren:
.picture:nth-child(-n+3) ( /* Not the same! This applies to elements matching .picture which _also_ match :nth-child(-n+3) */ )Dette kan blive lidt forvirrende, så et eksempel kan hjælpe med at illustrere forskellen:
Browsersupport til "of" -filteret er meget begrænset: I skrivende stund understøttede kun Safari syntaksen. For at kontrollere status for din yndlingsbrowser er her åbne problemer relateret til :nth-child(an+b of s):
- Firefox: Understøttelse af n-barn (An + B af sel)
- Chrome: Implementere: nth-child (an + b of S)
Interessepunkter
:nth-childitererer gennem elementer, der starter fra toppen af kildeordren. Den eneste forskel mellem det og:nth-last-childer, at sidstnævnte gentages gennem elementer, der starter fra bunden af kildearrangementet.- Syntaksen til valg af det første
nantal elementer er lidt kontraintuitiv. Du starter med-nplus det positive antal elementer, du vil vælge.li:nth-child(-n+3)Vælger for eksempel de første 3lielementer. - Den
:nth-childvælgeren er meget lig:nth-of-type, men med en kritisk forskel: det er mindre specifik. I vores eksempel ovenfor ville de producere det samme resultat, fordi vi kun itererer over.moduleelementer, men hvis vi gentager sig over en mere kompleks gruppe af søskende,:nth-childville vi prøve at matche alle søskende, ikke kun søskende af samme elementtype. Dette afslører styrken ved:nth-child-det kan vælge ethvert søskendeelement i et arrangement, ikke kun elementer, der er specificeret før kolon.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Nogen | 3.2+ | Nogen | 9.5+ | 9+ | Nogen | Nogen |
:nth-childblev introduceret i CSS Selectors Module 3, hvilket betyder, at gamle versioner af browsere ikke understøtter det. Imidlertid er moderne browsersupport upåklagelig, og de nye pseudovælgere bruges i vid udstrækning i produktionsmiljøer. Hvis du har brug for ældre browsersupport, skal du enten udfylde til IE eller bruge disse vælgere på ikke-kritiske måder á la progressiv forbedring, hvilket anbefales.