개요

CSS :nth-child() 의사 클래스는 같은 부모를 공유하는 형제 요소들 가운데 순서를 기준으로 요소를 선택하는 선택자임 인덱스는 1부터 시작함

참고로 nth는 n-th 서수 개념을 뜻함

핵심 개념

  • odd, even 키워드 지원
    • odd는 1, 3, 5처럼 형제 중 홀수번째 요소를 의미함
    • even은 2, 4, 6처럼 형제 중 짝수번째 요소를 의미함
  • 함수형 표기 <An+B> 지원
    • A는 정수 계수로 증가 간격을 의미함
    • B는 정수 오프셋 의미
    • n은 0 이상 정수 전체를 순회하는 변수 의미
    • An+B가 1 이상인 자연수로 평가되는 위치만 선택됨
  • :nth-child()는 요소 타입과 무관하게 형제 목록 전체를 기준으로 순서를 계산함
    • 즉 span:nth-child(2n+1)에서 카운팅은 모든 자식 요소를 포함하고, 선택 자체만 span에 한정됨
    • 타입별 순서를 기준으로 선택하려면 :nth-of-type() 사용
  • p:nth-child(n)은 형제 그룹 내 모든 p와 동일한 집합을 선택하나, 단순 p보다 명시도는 더 높음
  • p:nth-child(1) 또는 p:nth-child(0n+1)은 :first-child와 동일한 의미와 명시도를 가짐

동작 원리

  • An+B가 만드는 수열이 매칭 인덱스를 결정함
    • 예) 5n은 0, 5, 10, 15, …를 생성하나 인덱스는 1부터 시작하므로 0은 매칭되지 않음
    • 예) n+7은 7, 8, 9, …로 7번째 이후 전부 매칭됨
    • 예) 3n+4는 4, 7, 10, 13, … 매칭됨
    • 예) -n+3은 3, 2, 1 순으로 해석되어 결과적으로 앞의 3개가 매칭됨
  • 카운팅 단위는 요소 노드 기준임
    • 공백 텍스트 노드 등은 포함하지 않음

선택자 예시

  • 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, 10, 15, …번째 요소 선택 0은 선택되지 않음
  • :nth-child(n+7) 7번째부터 끝까지 선택
  • :nth-child(3n+4) 4, 7, 10, 13, …번째 요소 선택
  • :nth-child(-n+3) 앞에서 3개 요소 선택
  • p:nth-child(n) 형제 그룹 내 모든 p 선택 단순 p보다 명시도 높음
  • p:nth-child(1) 또는 p:nth-child(0n+1) 형제 그룹 내 첫 번째 p 선택 :first-child와 동일

짧은 스니펫

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

/* 4의 배수 번째 요소 선택 */
:nth-child(4n) {
  color: lime;
}

주의사항

  • :nth-child()는 형제 전체를 기준으로 순서를 매김 타입이 섞여 있으면 카운트에 모두 포함됨
    • 타입에 따라 카운트를 분리하고 싶다면 :nth-of-type() 사용
  • A, B는 정수만 허용 공백과 부호 위치는 CSS 구문 규칙을 따름
  • 0 또는 음수로 평가되는 위치는 매칭되지 않음
  • 명시도는 타입 선택자보다 높고, 클래스와 동일 계층의 의사 클래스 수준으로 취급됨
  • 최신 사양에서는 of 구문을 통해 :nth-child(An+B of S)처럼 선택자 리스트를 한정하는 패턴이 가능함 브라우저 호환성은 문서와 지원 현황 확인 권장

베스트 프랙티스

  • 단순 패턴은 odd, even으로 표현해 가독성 확보
  • 복잡한 패턴은 An+B를 사용하되, 수열을 1 이상 범위로 명확히 환산해 주석으로 의도 기록
  • 섞인 타입 환경에서의 혼동을 피하려면 가능하면 :nth-of-type() 우선 검토
  • 특정 구간 필터링은 교집합 패턴을 사용 예 p:nth-child(n+8):nth-child(-n+15)로 8~15 범위를 표현
  • 접근성 측면에서 시각 강조용 스타일만 바꾸는 경우 DOM 순서 의존 로직과 결합하지 않도록 주의

간단 비교 nth-child vs nth-of-type

  • nth-child 형제 전체 기준 카운트 타입 섞임에 영향 받음
  • nth-of-type 동일 태그 타입만 카운트 다른 타입은 건너뜀

마무리

:nth-child()는 CSS에서 반복적 패턴과 구간 선택을 간결하게 표현하는 기본 도구임 An+B를 수열 관점으로 해석하고, 타입 혼재 여부에 따라 nth-child와 nth-of-type을 구분 적용하면 예측 가능한 스타일링이 가능함 필요 시 최신 of 구문과 명시도 특성을 함께 고려해 유지보수 비용을 낮추는 전략 추천

참고자료