CSS :nth-child() 가상 클래스 사용 방법

`:nth-child(n)` 가상 클래스

:nth-child(n) 가상 클래스 선택자는
부모 요소의 자식 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들을 선택합니다.
예를 들어, ul li:nth-child(2)는 ul 요소의 자식 li 요소 중에서 2번째에 위치한 요소를 선택합니다.

부모 요소의 자식 요소 중에서 인덱스를 기준으로 뒤부터 계산하여 n 번째에 위치하는 요소들을 선택하려면 :nth-last-child(n) 가상 클래스 선택자를 사용하세요.

CSS :nth-last-child() 가상 클래스

CSS

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) 가상 클래스의 형식은 다음과 같습니다.

구문

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

매개변수 `n`의 값

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

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

음이 아닌 정수 인덱스 값

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

키워드 값(`odd` 또는 `even`)

:nth-child(n) 가상 클래스의 키워드 값 설명
`odd`	부모 요소의 자식 요소 중에서 홀수 번째(1, 3, 5, 7, ...)에 위치하는 요소들을 선택합니다.
`even`	부모 요소의 자식 요소 중에서 짝수 번째(2, 4, 6, 8, ...)에 위치하는 요소들을 선택합니다.

`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) {
    background-color: yellowgreen;
}

CSS aspect-ratio 속성