nth-child 의미 명확하게 알기 [nth-of-type와의 차이점]

 

0. 적용되지 않는 nth-child, 왜?

        <section>
            <span>span 1번째</span>
            <div>div 1</div>
            <div>div 2</div>
            <div>div 3</div>
            <div>div 4</div>
        </section>

 

위와 같은 코드가 있다고 생각해보자. 

section div:nth-child(1){color: red;}로 CSS를 적용해보면 적용이 되지 않는 것을 볼 수 있다. 
많은 이들이 착각하는게 바로 nth-child와 nth-of-type이다. 

 

 

1. nth-child와 nth-of-type의 차이점 

이 두가지는 모두 요소의 순서에 따라 스타일을 적용할 때 사용된다.

하지만 정확하게 따지자면 차이점이 있다. 

 

1-1. nth-child() :

• nth-child는 지정된 조건에 맞는 모든 요소를 선택한다. 부모요소의 자식으로서 요소가 몇번째인지가 기준이다. 

예를 들어서 위와 같은 구조에서 section div:nth-child(1){color: red;}로 설정하면 값이 나타나지 않는다고 했는데 div는 section의 첫번째 자식요소가 아니기 때문이다. 부모요소의 자식으로서 요소가 몇번째인지가 기준이기 때문에 section div:nth-child(2){color:red;}로 값을 수정해야지 section의 두번째에 위치한 div1의 폰트색이 빨강으로 바뀌게 된다. 

 

 

1-2. nth-of-type() :

• nth-of-type은 지정된 타입의 요소 중에서 조건에 맞는 요소를 선택한다. 이때 조건은 동일한 태그 유형을 가진 요소가 몇번째인지를 기준으로 한다.

위와 같은 구조에서 section div:nth-of-type(1){color:red;}라고 하면 section안에 있는 자식요소의 div들 중 첫번째 div의 폰트 컬러를 붉은색으로 바꾼다는 의미이기 때문에 section div:nth-child(2){color:red;}와 동일한 효과가 나타난다. 즉, section div:nth-of-type(2){color:red;}라고 한다면 div2라고 적힌 div의 폰트의 색상이 변경될 것이다. 

 

☘️ 정리하자면
nth-child는 부모요소의 모든 자식 요소를 대상으로 선택하는 반면, nth-of-type은 동일한 태그유형을 가진 요소중에서 선택한다는 것이다.