CSS 가상 클래스 nth-child와 nth-of-type의 공통점과 차이점

'nth-child'와 'nth-of-type'은 CSS에서 요소를 선택하는 데 사용되는 가상 클래스입니다.
이 두 클래스의 공통점과 차이점은 다음과 같습니다.

1. 공통점:

요소 선택: 둘 다 요소를 선택하기 위한 가상 클래스로 사용됩니다.
요소의 순서: 요소의 순서를 기반으로 선택할 수 있습니다.

---

2. 차이점:

대상 범위:
'nth-child': 이 가상 클래스는 부모 요소의 모든 자식 요소를 대상으로 선택합니다.
'nth-of-type': 이 가상 클래스는 동일한 타입의 요소 중에서 선택합니다.

선택 범위의 제한:
'nth-child': 모든 자식 요소를 대상으로 하므로 선택 범위가 더 넓습니다.
'nth-of-type': 동일한 타입의 요소 중에서 선택하므로, 선택 범위가 더 좁습니다.

---

예시

                    /* nth-child 예제 */
                    ul li:nth-child(3) {
                        color: blue;
                    }

                    /* nth-of-type 예제 */
                    ul li:nth-of-type(3) {
                        color: red;
                    }

                <ul>
                    <li>첫 번째</li>
                    <div>두 번째</div>
                    <li>세 번째</li>
                    <li>네 번째</li>
                    <li>다섯 번째</li>
                </ul>