<section>
    <p>'p' 태그 유형 중에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중에서 첫 번째 요소</div>
    <p>'p' 태그 유형 중에서 두 번째 요소</p>
    <p>'p' 태그 유형 중에서 세 번째 요소</p>
    <div>'div' 태그 유형 중에서 두 번째 요소</div>
    <div>'div' 태그 유형 중에서 세 번째 요소</div>
</section>
/* <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) {
    /* ... */
}
<section>
    <p>'p' 태그 유형의 첫 번째 p</p>
    <div>'div' 태그 유형의 첫 번째 div</div>
    <p>'p' 태그 유형의 두 번째 p</p>
</section>
div:nth-of-type(1) {
    background-color: yellowgreen;
}
p:nth-of-type(2) {
    background-color: orange;
}
실제 적용된 모습
<section>
    <p>'p' 태그 유형 중에서 첫 번째 요소</p>
    <div>'div' 태그 유형 중에서 첫 번째 요소</div>
    <p>'p' 태그 유형 중에서 두 번째 요소</p>
    <p>'p' 태그 유형 중에서 세 번째 요소</p>
    <div>'div' 태그 유형 중에서 두 번째 요소</div>
    <div>'div' 태그 유형 중에서 세 번째 요소</div>
</section>
div:nth-of-type(even) {
    background-color: yellowgreen;
}
p:nth-of-type(odd) {
    background-color: orange;
}
실제 적용된 모습
: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은 같은 유형의 모든 요소를 나타냅니다.
*/
<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-of-type(5n-1) {
    background-color: yellowgreen;
}
실제 적용된 모습
<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>`가 선택됩니다.
-->
실제 적용된 모습

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