[CSS 선택자] :nth-child()로 n번째부터 n번째까지 선택하기

 

꽤 자주 쓰는 데 사용할 때마다 헷갈려서 정리를 해놓으려고 한다.

 

 

div:nth-child(odd),
div:nth-child(2n+1){/* 홀수인 요소 */}
div:nth-child(even),
div:nth-child(2n){/* 짝수인 요소 */}

div:nth-child(3n){/* 3의 배수 번째인 요소 */}

div:nth-child(n+3){
  /* 3[=0+3], 4[=1+3], 5[=2+3], ... */
  /* 세 번째와 그 이후의 모든 요소(3~) */
}
div:nth-child(-n+3){
  /* 3[=-0+3], 2[=-1+3], 1[=-2+3] */
  /* 앞에서 세 개의 요소(1~3) */
}

div:nth-child(n+8):nth-child(-n+15){
  /* 형제 그룹 내에서 8번째부터 15번째까지의 div 요소(8~15) */
}

 

 

---

 

🔗 참고 사이트:

- [MDN Web Docs]:nth-child