The kind of CSS selectors reminder I like to keep close.
Select the 1st element
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(1) { color: blueviolet; }
or
li:first-child { color: blueviolet; }
Select the last element
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:last-child { color: blueviolet; }
Select the second to last element
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-last-child(2) { color: blueviolet; }
Select the 5th element
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(5) { color: blueviolet; }
Select the 3 first elements
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(-n+3) { color: blueviolet; }
Select all elements except the first 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(n+4) { color: blueviolet; }
Select the 3 last elements
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-last-child(-n+3) { color: blueviolet; }
Select all elements except the last 3
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-last-child(n+4) { color: blueviolet; }
Select every 4 elements strarting with the 1st one
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(4n-7) { color: blueviolet; }
or
li:nth-child(4n+1) { color: blueviolet; }
Select the even elements
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(even) { color: blueviolet; }
Select the odd elements
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
li:nth-child(odd) { color: blueviolet; }
Widely inspired by http://www.marevueweb.com/css-html/liste-nth-child-propriete/Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
— http://www.w3schools.com/cssref/sel_nth-child.asp