CSS nth

n-faches eines einzelnen Typs

1234567891011nth-child
(8)
(n+6)
(-n+9)
(n+4)(-n+8)
(n+2)(odd)
(3n+1)(even)
.e:nth-child(8) { ... }
.e:nth-child(n+6) { ... }
.e:nth-child(-n+9) { ... }
.e:nth-child(n+4):nth-child(-n+8) { ... }
.e:nth-child(n+2):nth-child(odd):nth-child(-n+9) { ... }
.e:nth-child(3n+1):nth-child(even) { ... }

n-faches mehrerer Typen

1 2 3 4 5 6 nth-of-type •nth-of-type ¤
¤
¤
¤
¤
¤
¤
(3)(4)
¤
¤
¤
¤
¤
¤
(n+3)(2n+2)
¤
¤
¤
¤
¤
¤
(-n+4)(-n+5)
¤
¤
¤
¤
¤
¤
(n+3)(-n+6)(n+1)(-n+3)
¤
¤ ¤
¤
¤
¤
(n+3)(odd)(-n+6)(n+1)(even)(-n+3)
.e1:nth-of-type(3) { ... }
.e2:nth-of-type(4) { ... }

.e1:nth-of-type(n+3) { ... }
.e2:nth-of-type(2n+2) { ... }

.e1:nth-of-type(-n+4) { ... }
.e2:nth-of-type(-n+5) { ... }

.e1:nth-of-type(n+3):nth-of-type(-n+6) { ... }
.e2:nth-of-type(n+1):nth-of-type(-n+3) { ... }

.e1:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6) { ... }
.e2:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3) { ... }

http://nthmaster.com

Jedes n-te Vorkommen

// every 4th occurence
div:nth-child(4n)

:nth-child(4n)

// 4(0) = 0
// 4(1) = 4
// 4(2) = 8
// 4(3) = 12
// 4(4) = 16
// ...


:nth-child(4n+4)

// 4(0) + 4 = 0  + 4 = 4
// 4(1) + 4 = 4  + 4 = 8
// 4(2) + 4 = 8  + 4 = 12
// 4(3) + 4 = 12 + 4 = 16
// 4(4) + 4 = 16 + 4 = 20
// ...

http://stackoverflow.com/questions/3462298/select-every-nth-element-in-css

Außer letztes Element

:not(:last-child) { /* styles */ }
tbody tr:not(:last-child):nth-child(4n)

http://stackoverflow.com/questions/2573544/how-can-i-select-all-children-of-an-element-except-the-last-child