[css] [css selector] :nth-child 사용하기

<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() 뒤에서부터 계산한다.