[CSS] nth-child(n) / nth-child(-n)

css nth-child(n)에 대해 확실히 알아보자.

/* 3,6,9.. 번째(3의배수) 적용 */
li:nth-child(3n) {}

/* 5번째 이후 부터 모든 리스트 적용 */
li:nth-child(n+5) {}

/* 첫번째부터 5번째까지 적용 */
li:nth-child(-n+5) {}

/* 5번째부터 10번째까지 적용 */
li:nth-child(n+5):nth-child(-n+10) {}

/* 끝에서 3번째만 적용 */
li:nth-last-child(3) {}

/* 홀수만 적용 */
li:nth-child(odd) {}

/* 짝수만 적용 */
li:nth-child(even) {}

 

Reference

https://hohoya33.tistory.com/99