[CSS] :nth-child ?

:nth-child

CSS :nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택합니다.

/* 목록의 두 번째 <li> 선택 */
li:nth-child(2) {
  color: lime;
}

/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
:nth-child(4n) {
  color: lime;
}

 

<키워드 값>

odd

형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냅니다.

even

형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냅니다.

<예제>

선택자

• tr:nth-child(odd) 또는 tr:nth-child(2n+1)
  • : HTML 표의 홀수번째 행을 나타냅니다.
• tr:nth-child(even) 또는 tr:nth-child(2n)
  • : HTML 표의 짝수번째 행을 나타냅니다.
• :nth-child(7)
  • : 임의의 7번째 요소를 나타냅니다.
• :nth-child(5n)
  • : 5 [=5×1], 10 [=5×2], 15 [=5×3], ... 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 0 [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 n은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.
• :nth-child(n+7)
  • : 7번째와 그 이후의 모든 요소, 즉 7 [=0+7], 8 [=1+7], 9 [=2+7], ... 를 나타냅니다.
• :nth-child(3n+4)
  • : 4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], ... 번째의 요소를 나타냅니다.
• :nth-child(-n+3)
  • : 앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]
• p:nth-child(n)
  • : 형제 그룹 내의 모든 <p> 요소를 나타냅니다. 단순한 p 선택자와 동일하지만 더 높은 명시도를 가집니다.
• p:nth-child(1) 또는 p:nth-child(0n+1)
  • : 형제 그룹 내의 모든 첫 번째 <p> 요소를 나타냅니다. :first-child 선택자와 동일하며 같은 명시도를 가집니다.
• p:nth-child(n+8):nth-child(-n+15)
  • : 형제 그룹 내에서 8번째부터 15번째 까지의 <p> 요소를 나타냅니다.

 

 

참고> 

https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child

:nth-child - CSS: Cascading Style Sheets | MDN