CSS :nth-child 선택자를 활용해 부모의 두 번째 자식인 모든 요소에 스타일 지정하기

CSS에서 부모 요소의 두 번째 자식에 해당하는 모든 요소를 선택하고 스타일을 적용하려면 :nth-child(n) 선택자를 사용하면 됩니다.

:nth-child(n) 선택자란?

:nth-child(n) 선택자는 부모 요소 안에서 n번째 위치한 자식 요소를 정확히 찾아내는 구조적 가상 클래스입니다. 괄호 안에 원하는 순번을 넣으면 해당 순서의 요소만 선택되며, 이를 활용하면 클래스나 ID를 추가하지 않고도 특정 위치의 요소에 손쉽게 스타일을 지정할 수 있습니다.

예제 코드

다음 예제는 부모의 두 번째 자식인 요소에 배경색과 글자색을 적용하는 코드입니다. 아래 코드를 직접 실행해 결과를 확인해 보세요.

<!DOCTYPE html>
<html>
  <head>
    <style>
      p:nth-child(2) {
        background: orange;
        color: white;
      }
    </style>
  </head>
  <body>
    <p>첫 번째 문단입니다.</p>
    <p>두 번째 문단입니다.</p>
    <p>세 번째 문단입니다.</p>
    <p>네 번째 문단입니다.</p>
    <p>다섯 번째 문단입니다.</p>
    <p>여섯 번째 문단입니다.</p>
  </body>
</html>

실행 결과

위 코드를 실행하면 여섯 개의 문단 중 두 번째 위치한 요소만 주황색 배경과 흰색 글자로 표시됩니다. 나머지 문단에는 어떤 스타일도 적용되지 않습니다.

응용: 다양한 nth-child 패턴

:nth-child() 선택자는 단순한 숫자뿐 아니라 다양한 패턴도 지원합니다.

p:nth-child(odd) — 홀수 번째 자식인 모든 요소 선택
p:nth-child(even) — 짝수 번째 자식인 모든 요소 선택
p:nth-child(3n) — 3의 배수 번째(3번째, 6번째, 9번째…) 자식인 요소 선택

이처럼 :nth-child(n) 선택자를 잘 활용하면 HTML 구조를 수정하지 않고도 CSS만으로 원하는 위치의 요소를 유연하게 제어할 수 있습니다.