: nth-of-type - CSS-triks

Anonim

Den :nth-of-typeVelgeren gjør det mulig å velge ett eller flere elementer basert på deres kilde rekkefølge, i henhold til en formel. 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 har en uordnet liste og ønsker å "zebra-stripe" alternerende listeelementer:



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

I stedet for å legge til klasser til hvert listeelement (f.eks. .even& .odd) Kan vi bruke :nth-of-type:

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

Som du kan se, :nth-of-typetar det et argument: dette kan være et enkelt heltall, nøkkelordene "jevn" eller "odd", eller en formel som vist ovenfor. 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 som ligner på navigeringselementer i en matrise i JavaScript. Nøkkelord "jevn" og "merkelig" er grei, men 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 andre element med formelen 2n, som fungerte fordi hver gang et element ble sjekket, økte “n” med ett (2 × 0, 2 × 1, 2 × 2, 2 × 3 osv.). Hvis rekkefølgen til et element samsvarer med resultatet av ligningen, blir den valgt (2, 4, 6 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-of-typevelgere:

Sjekk ut denne pennen!

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

  • CSS-Tricks Tester
  • Lea Verous tester

Interessepunkt

  • :nth-of-typedet går gjennom elementer som starter fra toppen av kildearrangementet. Den eneste forskjellen mellom det og :nth-last-of-typeer at sistnevnte itererer gjennom elementer som starter fra bunnen av kildearrangementet.
  • Den :nth-of-typevelgeren er svært lik :nth-child, men med en viktig forskjell: det er mer spesifikke. I eksemplet vårt ovenfor ville de produsere det samme resultatet fordi vi bare itererer over lielementer, 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-of-type-it retter seg mot en bestemt type element i en ordning i forhold til lignende søsken, ikke alle søsken.

Nettleserstøtte

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

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