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

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

:nth-of-type(n) 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 n 번째에 위치하는 요소들을 선택합니다.

특정 유형(태그 이름)에 상관 없이 부모 요소 내 모든 형제 요소 중에서 인덱스를 기준으로 n 번째에 위치하는 요소들을 선택하려면 :nth-child(n) 가상 클래스 선택자를 사용하세요.

HTML

<section>
    <p>'p' 태그 유형 중에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중에서 첫 번째 요소</div>
    <p>'p' 태그 유형 중에서 두 번째 요소</p>
    <p>'p' 태그 유형 중에서 세 번째 요소</p>
    <div>'div' 태그 유형 중에서 두 번째 요소</div>
    <div>'div' 태그 유형 중에서 세 번째 요소</div>
</section>

CSS

/* <section>의 <p> 태그 유형의 자식 요소들 중에서
 * <p> 태그 유형을 기준으로
 * 두 번째에 위치하는 요소
*/
section p:nth-of-type(2) {
    background-color: yellowgreen;
}

/* <section>의 <div> 태그 유형의 자식 요소들 중에서
 * <div> 태그 유형을 기준으로
 * 두 번째에 위치하는 요소
*/
section div:nth-of-type(2) {
    background-color: orange;
}

:nth-of-type(n) 가상 클래스의 형식은 다음과 같습니다.

구문

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

매개변수 `n`의 값

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

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

음이 아닌 정수 인덱스 값

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

HTML

<section>
    <p>'p' 태그 유형의 첫 번째 p</p>
    <div>'div' 태그 유형의 첫 번째 div</div>
    <p>'p' 태그 유형의 두 번째 p</p>
</section>

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

:nth-of-type(n) 가상 클래스의 키워드 값 설명
`odd`	특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 홀수 번째(1, 3, 5, 7, ...)에 위치하는 요소들을 선택합니다.
`even`	특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 짝수 번째(2, 4, 6, 8, ...)에 위치하는 요소들을 선택합니다.

HTML

<section>
    <p>'p' 태그 유형 중에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중에서 첫 번째 요소</div>
    <p>'p' 태그 유형 중에서 두 번째 요소</p>
    <p>'p' 태그 유형 중에서 세 번째 요소</p>
    <div>'div' 태그 유형 중에서 두 번째 요소</div>
    <div>'div' 태그 유형 중에서 세 번째 요소</div>
</section>

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

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

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

이는 목록의 An+B 번째 요소로 읽을 수 있습니다.

CSS

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

:nth-of-type(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-of-type(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-of-type(n)
/*
 * 0 [0], 1 [1], 2 [2], 3 [×3], ... 번째의 요소를 나타냅니다.
 * 요소의 인텍스는 1부터 시작하기 때문에 0 번째의 요소는 없으므로, 1, 2, 3, ... 번째의 요소를 나타냅니다.
 * 결론적으로 n은 같은 유형의 모든 요소를 나타냅니다.
*/

다음은 :nth-of-type(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-of-type(5n-1) {
    background-color: yellowgreen;
}

CSS aspect-ratio 속성

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

주의할 점

:nth-of-type(n) 가상 클래스 선택자는
특정 유형(태그 이름)의 형제 요소들 중에서 그 유형을 기준으로 n 번째에 위치하는 요소들을 선택합니다.

특정 유형이란 태그 이름의 유형입니다.

다음의 예제로 살펴보겠습니다.

HTML

<style>
    .red-item:nth-of-type(2) {
        color: red;
        font-weight: bold;
    }
</style>
<ol>
    <li>li</li>
    <li class="red-item">매칭되는 요소</li>
    <li class="red-item">매칭될 요소로 기대하지만 아님</li>
</ol>
<!--
    * 혹시 .red-item 유형 중에서 두 번째를 선택했나요?
    * 그렇다면 잘못된 선택입니다.
    *
    * .red-item:nth-of-type(2)는 두 부분으로 나뉩니다.
    * => .red-item: 클래스 속성의 값이 'red-item'인 요소의 태그 이름은 <li>입니다.
    * => 특정 유형은 태그 이름 유형을 의미합니다.
    * => <li> 요소가 특정 유형이 됩니다.
    * => 태그 유형이 <li>의 두 번째 요소가 'red-item'라는 클래스 속성의 값이 있어야 선택됩니다.
    * => 따라서, `<li class="red-item">매칭되는 요소</li>`가 선택됩니다.
-->