CSS의 :nth-child(n) 선택자는 부모 요소 안에서 n번째 자식에 해당하는 요소만 골라 스타일을 적용할 수 있는 강력한 도구입니다. 별도의 class나 id를 추가하지 않아도 되기 때문에 마크업을 수정할 필요 없이 깔끔하게 원하는 요소만 제어할 수 있습니다.
:nth-child(n) 선택자란?
:nth-child(n)은 형제 요소 중 n번째 위치에 있는 요소를 선택하는 CSS 구조적 의사 클래스(pseudo-class)입니다. 예를 들어 부모 요소의 두 번째 자식인 모든 <p> 요소를 스타일링하려면 p:nth-child(2)와 같이 작성하면 됩니다.
주요 사용 패턴
:nth-child(3)— 세 번째 자식 요소 하나만 선택:nth-child(odd),:nth-child(even)— 홀수/짝수 번째 요소를 각각 선택:nth-child(2n+1)— an+b 형태의 수식으로 반복 패턴 지정
예제 코드
아래 예제는 p:nth-child(4)를 사용해 여섯 개의 문단 중 네 번째 <p> 요소에 주황색 배경과 흰색 글자색을 적용하는 코드입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(4) {
background: orange;
color: white;
}
</style>
</head>
<body>
<p>첫 번째 데모 텍스트입니다.</p>
<p>두 번째 데모 텍스트입니다.</p>
<p>세 번째 데모 텍스트입니다.</p>
<p>네 번째 데모 텍스트입니다.</p>
<p>다섯 번째 데모 텍스트입니다.</p>
<p>여섯 번째 데모 텍스트입니다.</p>
</body>
</html>실행 결과
코드를 실행하면 여섯 개의 문단 중 정확히 네 번째 문단('네 번째 데모 텍스트입니다.')만 주황색 배경에 흰색 텍스트로 표시되고, 나머지 문단은 기본 스타일 그대로 유지됩니다. 이처럼 :nth-child(n) 선택자는 요소의 순번을 기준으로 정밀하게 스타일을 지정할 수 있습니다.
마무리
:nth-child(n) 선택자는 테이블의 줄무늬 효과, 목록 스타일링, 갤러리 레이아웃 등 반복적인 UI 패턴에서 특히 유용합니다. odd·even 키워드와 an+b 수식까지 함께 익혀두면 훨씬 다양한 상황에서 활용할 수 있으니 꼭 연습해 보시기 바랍니다.