Pseudo-class :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type - CSS

CSS :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type kan give forskellig baggrundsfarve på lige og ulige elementer i en liste

Introduktion

CSS :nth-* pseudo-class'er kan eksempelvis bruges til at style lige/ulige antal elementer i en liste med forskellige farver.

Der er følgende 4 pseudo-class'er :
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :nth-last-of-type
Værdien even er det samme som 2n.
Værdien odd er det samme som 2n+1.

Vær opmærksom på at :nth-* bruges på child elementer og ikke på forældre elementet.

Demo

Her har vi et <div>...</div> forældre elementet med flere <p>...</p> child elementer.
nth-child bruges på child elementet <p>...</p>.

linje 1

linje 2

linje 3

linje 4

linje 5

linje 6

linje 7

Resultatet ovenfor er skabt af følgende kode


linje 1

linje 2

linje 3

linje 4

linje 5

linje 6

linje 7

Resultatet ovenfor er skabt af følgende kode


linje 1

linje 2

linje 3

linje 4

linje 5

linje 6

linje 7

Resultatet ovenfor er skabt af følgende kode


Resultatet ovenfor er skabt af følgende kode


ABCDE
12345
678910
1112131415
Resultatet ovenfor er skabt af følgende kode

Browserunderstøttelse af CSS :nth

Browser :nth
Firefox logo
Firefox 20.0.1
ja
Opera logo
Opera 12.15
ja
Safari logo
Safari 5.1.7
ja
Chrome logo
Chrome 25.0.1364.172 m
ja
Internet Explorer logo
Internet Explorer 10.0.9200.16540
ja
Alle tests er udført på Windows 7 (64-bit)


Browserunderstøttelse fra caniuse.com :
Siden er sidst opdateret mandag 25. juni 2018