: n-type - CSS-tricks

Anonim

Den :nth-of-typevælgeren kan du vælge en eller flere elementer baseret på deres kilde ordre, ifølge en formel. Det er defineret i CSS Selectors Level 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 har en ikke-ordnet liste og ønsker at "zebrastribe" alternerende listeelementer:



    

  • First Item
    • 

  • Second Item
    • 

  • Third Item
    • 

  • Fourth Item
    • 

  • Fifth Item
    •

I stedet for at tilføje klasser til hvert listeelement (f.eks. .even& .odd) Kan vi bruge :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-typetager der et argument: dette kan være et enkelt heltal, nøgleordene "lige" eller "ulige" eller en formel som vist ovenfor. Hvis der er angivet et heltal, vælges kun et element, men nøgleordene eller en formel gentages gennem alle underordnede elementers børn og vælger matchende elementer, der ligner navigationselementer i en matrix i JavaScript. Nøgleordene "lige" og "ulige" er ligetil, men 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 andet element med formlen 2n, som fungerede, fordi hver gang et element blev kontrolleret, steg "n" med et (2 × 0, 2 × 1, 2 × 2, 2 × 3 osv.). Hvis et elements rækkefølge matcher resultatet af ligningen, bliver det valgt (2, 4, 6 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-of-typevælgere:

Tjek denne pen!

Heldigvis behøver du ikke altid lave matematikken selv - der er flere :nth-of-typetestere og generatorer derude:

  • CSS-Tricks Tester
  • Lea Verous tester

Interessepunkter

  • :nth-of-typeitererer gennem elementer, der starter fra toppen af ​​kildeordren. Den eneste forskel mellem det og :nth-last-of-typeer, at sidstnævnte gentages gennem elementer, der starter fra bunden af ​​kildearrangementet.
  • Den :nth-of-typevælgeren er meget lig :nth-child, men med en kritisk forskel: det er mere specifik. I vores eksempel ovenfor ville de producere det samme resultat, fordi vi kun itererer over lielementer, 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-of-type- det er målrettet mod en bestemt type element i et arrangement i forhold til lignende søskende, ikke alle søskende.

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
Arbejder 3.2+ Arbejder 9.5+ 9+ Arbejder Arbejder

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