CSS의 :nth-child() 선택자는 그룹 안에서 특정 위치에 있는 요소에 스타일을 적용합니다. 주로 목록에서 두 번째, 세 번째 항목처럼 특정 위치의 항목에만 스타일을 지정하고 싶을 때 자주 사용됩니다.
웹사이트를 디자인하다 보면 컨테이너 안의 일부 요소에만 스타일을 적용하고 싶은 경우가 생깁니다. 예를 들어 목록에서 두 번째 요소마다, 혹은 테이블에서 세 번째 행마다 스타일을 넣고 싶을 수 있죠.
바로 이럴 때 CSS :nth-child 의사 클래스(pseudo-class)가 빛을 발합니다. :nth-child는 HTML 페이지에서 요소의 위치를 기준으로 요소를 매칭해 줍니다.
이 글에서는 의사 클래스의 기본 개념과 :nth-child 의사 클래스의 사용법을 예제와 함께 차근차근 살펴봅니다. 끝까지 읽고 나면 웹 페이지에서 원하는 요소를 프로 개발자처럼 자유롭게 선택할 수 있게 될 것입니다.
CSS 의사 클래스(Pseudo-Class)란?
CSS에서 선택자(selector)는 웹 페이지에서 스타일을 적용할 특정 요소를 골라내는 역할을 합니다. 예를 들어 선택자를 사용하면 페이지의 모든 <p> 요소의 텍스트 색상을 초록색으로 바꿀 수 있습니다.
그런데 어떤 경우에는 '특정 상태'에 놓인 요소에만 스타일을 적용하고 싶을 때가 있습니다. 이때 의사 클래스를 사용하면 요소가 특정 상태일 때만 스타일을 적용할 수 있습니다.
CSS :nth-child 의사 클래스 기본 문법
:nth-child 의사 클래스는 그룹 내 요소에 스타일을 적용합니다. 특정 위치의 단일 요소에 스타일을 줄 수도 있고, 여러 요소에 한 번에 적용할 수도 있습니다. 가장 흔히 쓰이는 규칙 중 하나는 목록에서 홀수 번째 또는 짝수 번째 요소마다 색상을 입히는 것입니다.
기본 문법은 다음과 같습니다:
li:nth-child(2) {
color: lightblue;
}
예제를 하나씩 뜯어보겠습니다:
- li: 스타일을 적용할 대상 요소입니다.
- nth-child: 요소를 매칭하는 데 사용되는 선택자입니다.
- 2: 어떤 요소를 매칭할지 결정하는 공식입니다.
즉, 위 코드는 목록에서 두 번째 <li> 요소에 스타일을 적용합니다.
:nth-child가 받아들이는 값
:nth-child 의사 클래스는 두 가지 유형의 값을 받습니다.
첫 번째, 키워드 값 — 기본 공식이 미리 할당되어 있는 키워드입니다.
- odd: 목록에서 홀수 번째 위치의 요소를 선택합니다.
- even: 목록에서 짝수 번째 위치의 요소를 선택합니다.
두 번째, 사용자 정의 공식 — 어떤 요소를 선택할지 직접 지정하는 공식입니다. 대표적인 예시는 다음과 같습니다:
- :nth-child(6): 목록의 여섯 번째 요소를 선택합니다.
- :nth-child(n+2): 두 번째 요소와 그 이후의 모든 요소를 선택합니다.
- :nth-child(4n): 4의 배수 위치에 있는 모든 요소를 선택합니다.
여기서 n은 항목이 목록에서 차지하는 위치를 나타내는 변수입니다.
기본기를 익혔으니, 이제 실제 동작 예제를 살펴보겠습니다.
CSS :nth-child 활용 예제
1. 테이블 행 선택하기
:nth-child의 대표적인 용도 중 하나는 테이블의 특정 행을 선택하는 것입니다.
예를 들어 지역 요리 동호회 웹사이트를 디자인한다고 가정해 봅시다. 동호회에서는 시그니처 메뉴인 스파이스 핫 초콜릿 레시피를 담은 표를 만들어 달라고 요청했고, 동호회의 대표 색상인 핫핑크(hot pink)로 짝수 번째 행마다 배경색을 채워달라고 했습니다.
다음 코드로 이 표를 만들 수 있습니다:
<table>
<tr>
<th>재료</th>
<th>분량</th>
</tr>
<tr>
<td>탈지우유</td>
<td>250ml</td>
</tr>
<tr>
<td>다크 초콜릿(75%)</td>
<td>2칸(10g)</td>
</tr>
<tr>
<td>계핏가루</td>
<td>약간</td>
</tr>
<tr>
<td>꿀</td>
<td>1작은술</td>
</tr>
</table>
<style>
tr:nth-child(even) {
background-color: hotpink;
}
</style>
위 코드는 두 개의 열과 다섯 개의 행(헤더 행 포함)으로 구성된 표를 정의합니다. 첫 번째 열에는 재료 목록이, 두 번째 열에는 각 재료의 분량이 들어갑니다.
CSS 부분을 보면, tr 선택자가 모든 테이블 행(<tr> 태그)을 선택하고, :nth-child(even) 의사 클래스가 그중 짝수 번째 행만 골라냅니다. 결과적으로 짝수 번째 행마다 배경색이 핫핑크로 설정됩니다.
2. 목록 항목 선택하기
:nth-child의 또 다른 흔한 용도는 목록에서 특정 항목을 강조하는 것입니다.
이번에는 요리 동호회 회원 명단을 만든다고 가정해 봅시다. 임원 직책을 맡고 있는 처음 세 명의 이름은 연한 파란색(light blue)으로 표시해야 합니다.
<ul>
<li>김민준</li>
<li>박서연</li>
<li>이준호</li>
<li>최지우</li>
<li>정하윤</li>
<li>강도현</li>
<li>윤서아</li>
</ul>
<style>
li:nth-child(-n+3) {
color: lightblue;
}
</style>
<ul> 태그로 순서 없는 목록을 정의하고, <li> 태그로 일곱 명의 이름을 추가했습니다.
CSS 코드에서는 :nth-child 선택자에 -n+3 공식을 사용해 목록의 처음 세 개 <li> 항목을 선택했습니다. 그런 다음 선택된 요소들의 텍스트 색상을 연한 파란색으로 변경했습니다. 이처럼 음수를 포함한 공식을 활용하면 '앞에서 N개'처럼 범위를 유연하게 지정할 수 있습니다.
마무리
:nth-child 선택자를 사용하면 그룹 내에서 요소의 위치를 기준으로 요소를 선택하고 CSS 스타일을 적용할 수 있습니다.
이 글에서는 테이블과 목록 두 가지 예제를 통해 CSS 의사 클래스의 기본 개념과 :nth-child 의사 클래스의 사용법을 알아봤습니다. odd/even 키워드와 n 공식만 잘 조합해도 반복되는 UI 패턴을 손쉽게 구현할 수 있으니, 직접 다양한 공식을 실험해 보며 감을 익혀 보세요!