[CSS] nth-child / n번째부터 n번째까지 CSS 변경

특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다.

 

3의 배수인 박스 배경 변경

.box:nth-child(3n){
    background:red
}

 

20번째 이후 모든 박스 배경 변경

/* 22번 부터 이후 모든 box 폰트색 변경 */
.box:nth-child(n+20) {
    background:red
}

 

1번째부터 5번째까지 박스 배경 변경

1번째부터 지정할때는 -n으로 시작하는 것 주의

.box:nth-child(-n+6) {
    background:red
}

 

15번째부터 20번째까지 박스 배경색 변경

.box:nth-child(n+15):nth-child(-n+20) {
    background:red
}

 

마지막에서 3번째 박스 변경

.box:nth-last-child(3) {
    background:red
}

 

마지막부터 홀수/짝수인 박스 배경색 변경

.box:nth-child(odd) { background:red } /*홀수*/
.box:nth-child(even) { background:red } /*짝수*/