nth of single type
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | nth-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) { ... }
nth of multiple types
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) { ... }
Every nth occurence
// 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
Except last child
:not(:last-child) { /* styles */ }
tbody tr:not(:last-child):nth-child(4n)