CSS3 "nth" Structural Pseudo-Classes
Example 1: li:nth-child(3)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 2: div#example2 p:nth-child(3)
Numbers
one
two
three
four
five
six
seven
eight
nine
ten
Example 3: ul#example3 li:nth-child(even)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 4: ul#example3 li:nth-child(2n+3)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 5: ul#example5 li:nth-child(5n-1)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 6: ul#example6 li:nth-last-child(3)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 7: ul#example7 li:nth-last-child(even)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 8: ul#example8 li:nth-last-child(2n+3)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Example 9: ul#example9 li:nth-last-child(5n-1)
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
- ten
Examples 10&11: div#example10 p:nth-child(3n + 2)
and div#example11 p:nth-of-type(3n + 2)
Numbers
one
two
three
More Numbers
four
five
six
Yet More Numbers
seven
eight
nine
ten
Numbers
one
two
three
More Numbers
four
five
six
Yet More Numbers
seven
eight
nine
ten