<style type="text/css">
ul.test li { display:block; width:40px; height:40px; float:left; margin:0 15px 15px 0; }
ul.test li:nth-child(1) { background:#ff0; } /* 지정한 1개만 */
ul.test li:nth-child(3n+1) { border:1px solid #f00; } /* 규칙적으로 (3개마다) */
ul.test li:nth-child(-n+5) { color:blue; font-weight:bold; } /* 앞에서부터 계산(~ 5) */
ul.test li:nth-child(n+17) { color:red; font-weight:bold; } /* 뒤에서부터 계산(18 ~) */
ul.test li:nth-child(n+11):nth-child(-n+15) { background:#6ff; } /* 범위로 계산(11 ~ 15) */
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
:nth-child(odd) 홀수
:nth-child(even) 짝수
:nth-last-child() 뒤에서부터 계산한다.
