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 :

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.