정의 및 사용 방법

:nth-child(n)은 부모의 자식 중 순서가 n 번째인 요소를 선택하는 가상 클래스입니다.
예를 들어, :nth-child(2)는 자식 중에서 2 번째에 위치한 요소를 선택합니다.

기본 예제

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
:nth-child(2) { /* 자식 중에서 2 번째에 위치한 요소를 선택 */
    background-color: yellow;
}
실제 적용된 모습

구문

CSS 
/* 양의 정수: n 번째 */
:nth-child(1) /* 임의의 자식 중에서 첫 번째 요소 선택 */ 
li:nth-child(1) /* 임의의 자식 중에서 첫 번째인 <li> 요소 선택 */ 

:nth-child(7) /* 임의의 자식 중에서 일곱 번째 요소 선택 */ 
li:nth-child(7) /* 임의의 자식 중에서 일곱 번째인 <li> 요소 선택 */ 

/* 키워드: even / odd */
:nth-child(odd) /* 임의의 자식 중에서 홀수(1, 3, 5,...) 번째 요소 선택 */
li:nth-child(even) /* 임의의 자식 중에서 짝수(2, 4, 6,...) 번째인 <li> 요소 선택 */ 

/* 수식: An+B */
:nth-child(2n) /* 임의의 자식 중에서 2의 배수 번째 요소 선택 */ 
li:nth-child(2n) /* 임의의 자식 중에서 2의 배수 번째인 <li> 요소 선택 */ 

:nth-child(3n) /* 임의의 자식 중에서 3의 배수 번째 요소 선택 */ 
li:nth-child(2n) /* 임의의 자식 중에서 3의 배수 번째인 <li> 요소 선택 */ 

:nth-child(3n+1) /* 임의의 자식 중에서 3의 배수에 1일 더한 번째 요소 선택 */ 
:nth-child(3n-1) /* 임의의 자식 중에서 3의 배수에 1일 뺀 번째 요소 선택 */

형식 구문

CSS 
:nth-child(index | odd | even | an+b) {
    /* ... */
}

:nth-child(n) 가상 클래스의 n을 하나의 매개변수로 사용해 지정합니다.

매개변수 n의 값

부모 요소의 자식 요소 중에서 선택하려는 요소의 매개변수입니다. 매개변수 n은 세 가지 방법으로 값을 지정할 수 있습니다.

  1. 음이 아닌 정수 인덱스 값
  2. 키워드 값[odd(홀수 번째) 또는 even(짝수 번째)]
  3. An+B 형태의 사용자 지정 패턴

음이 아닌 정수 인덱스 값

부모 요소의 자식 요소 중에서 음이 아닌 정수로 인덱스를 매겨 그 순서에 맞는 요소를 선택합니다. 인덱스는 1부터 시작합니다.

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
li:nth-child(2) { /* 음이 아닌 정수 가능 */
    border: 3px solid blue;
}
실제 적용된 모습 인덱스는 1부터 시작합니다.

키워드 값(odd 또는 even)

:nth-child(n) 가상 클래스의 키워드 값 설명
odd 부모 요소의 자식 요소 중에서 홀수 번째(1, 3, 5, 7, ...)에 위치하는 요소들을 선택합니다.
even 부모 요소의 자식 요소 중에서 짝수 번째(2, 4, 6, 8, ...)에 위치하는 요소들을 선택합니다.
HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
li:nth-child(even) {
    background-color: yellowgreen;
}
실제 적용된 모습

An+B 형태의 사용자 지정 패턴

An+B 형태의 사용자 지정 패턴을 만족한 인덱스를 가지는 요소들을 선택합니다.

  • A는 정수 인덱스 증감 단계,
  • B는 정수 오프셋으로 생략 가능하며,
  • n은 0부터 시작하는 모든 양의 정수를 나타냅니다.

이는 자식 요소 중에서 An+B 번째 요소로 읽을 수 있습니다.

CSS 
:nth-child(5n)
/*
 * 0 [=5×0], 5 [=5×1], 10 [=5×2], 15 [=5×3], ... 번째의 요소를 나타냅니다. 
 * 요소의 인텍스는 1부터 시작하기 때문에 0 번째의 요소는 없으므로, 5, 10, 15, ... 번째의 요소를 나타냅니다. 
 * 결론적으로 5n은 5의 배수 번째 요소들을 선택합니다.
*/

:nth-child(5n-1)
/*
 * -1 [=5×0-1], 4 [=5×1-1], 9 [=5×2-1], 14 [=5×3-1], ... 번째의 요소를 나타냅니다. 
 * 요소의 인텍스는 1부터 시작하기 때문에 -1 번째의 요소는 없으므로, 4, 9, 14, ... 번째의 요소를 나타냅니다. 
 * 결론적으로 5n은 5의 배수 번째에서 하나 앞의 요소들을 선택합니다.
*/

:nth-child(5n+1)
/*
 * 1 [=5×0+1], 6 [=5×1+1], 11 [=5×2+1], 16 [=5×3+1], ... 번째의 요소를 나타냅니다. 
 * 1, 6, 11, 16, ... 번째의 요소를 나타냅니다. 
 * 결론적으로 5n은 5의 배수 번째에서 하나 뒤의 요소들을 선택합니다.
*/

:nth-child(n)
/*
 * 0 [0], 1 [1], 2 [2], 3 [×3], ... 번째의 요소를 나타냅니다.
 * 요소의 인텍스는 1부터 시작하기 때문에 0 번째의 요소는 없으므로, 1, 2, 3, ... 번째의 요소를 나타냅니다.
 * 결론적으로 n은 모든 요소를 나타냅니다.
*/

다음은 :nth-child(An+B) 선택자를 활용한 요소 선택을 패턴화해서 스타일한 예제입니다.

HTML 
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
CSS 
ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 7px;
}
ol li {
    aspect-ratio: 1/0.5;
    border: 1px solid red;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}
ol li:nth-child(5n-1) { /* 5의 배수 번째에서 하나 앞의 요소들을 선택 */
    background-color: yellowgreen;
}
실제 적용된 모습

이 예제를 보면 알 수 있듯이 :nth-child(n) 가상 클래스 선택자에 An+B 형태의 사용자 지정 패턴을 활용하면 요소 선택을 패턴화하기 쉽습니다.

브라우저 호환성

마지막 업데이트 정보: 2025-09-12

:nth-child() 가상 클래스의 브라우저 호환성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:nth-child() 1 112 3.5 3.1
부모 요소가 없는 요소와 일치 57 79 52 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

:nth-child() 가상 클래스의 명세서 사양
명세서 사양
:nth-child() Selectors Level 4
#nth-child-pseudo

참고문헌

같이 보기