<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>
</ol>
li:nth-child(2) { /* 음이 아닌 정수 가능 */
    border: 3px solid blue;
}
li:nth-child(odd) { /* odd(홀수 번째) 또는 even(짝수 번째) 키워드 적용 가능 */
    background-color: yellowgreen;
}
li:nth-child(4n) { /* 사용자 지정 패턴(An+B의 형태) 가능 */
    color: red;
}
실제 적용된 모습
:nth-child(n) {
    /* ... */
}
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
li:nth-child(2) { /* 음이 아닌 정수 가능 */
    border: 3px solid blue;
}
실제 적용된 모습 인덱스는 1부터 시작합니다.
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
li:nth-child(even) {
    background-color: yellowgreen;
}
실제 적용된 모습
: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은 모든 요소를 나타냅니다.
*/
<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>   
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) {
    background-color: yellowgreen;
}
실제 적용된 모습

마지막 업데이트 정보: 2023-10-27

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

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