工夫/HTML+CSS

[CSS] :nth-child() 의 다양한 용례

휘현아빠 2021. 5. 19. 11:49

/* 3, 6, 9, 12 번째(3의배수) 배경변경 */ 
li:nth-child(3n){ background: red; } 

/* 10번째 부터 이후 모든 리스트 컬러변경 */ 
li:nth-child(n+10) { color: blue; } 

/* 1번째 부터 5번째 까지 배경변경 */ 
li:nth-child(-n+5) { background: green; } 

/* 15번째 부터 20번째 까지 배경변경 */ 
li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } 

/* 끝에서 부터 3번째 */ 
li:nth-last-child(3) { background: gold; } 

/* 홀수 */ 
li:nth-child(odd) { color: red; } 

/* 짝수 */ 
li:nth-child(even) { color: red; }