CSS :nth-child

n 번째 자식 요소 선택

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

 

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.

 

기본 예제

<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>

ol > :nth-child(2) { /* <ol> 자식 중에서 2 번째에 위치한 요소를 선택 */
    background-color: yellow;
}

 

구문

/* 양의 정수: 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일 뺀 번째 요소 선택 */

 

형식 구문

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

 

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

 

매개변수 n의 값

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

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

# 음이 아닌 정수 인덱스 값

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

 

li:nth-child(2) { /* 음이 아닌 정수 가능 */
    border: 3px solid blue;
}

 

# 키워드 값(odd 또는 even)

• odd: 부모 요소의 자식 요소 중에서 홀수 번째(1, 3, 5, 7, ...)에 위치하는 요소들을 선택합니다.
• even: 부모 요소의 자식 요소 중에서 짝수 번째(2, 4, 6, 8, ...)에 위치하는 요소들을 선택합니다.

li:nth-child(even) {
    background-color: yellowgreen;
}

 

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

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

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

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

: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은 모든 요소를 나타냅니다.
*/

 

또 다른 출처 정보

https://codingeverybody.jp/css-nth-child-pseudo-class/

CSS :nth-child()疑似クラス：n番目の子要素の選択 - codingEverybody

 

https://coding.courses/css-nth-child-pseudo-class/

CSS :nth-child() Pseudo-Class – Select the nth Child Element - codingCourses