nth-child와 nth-of-type의 차이

목차

· nth-child

· nth-of-type

---

nth-child

nth-child는 모든 자식의 순서에서 지정해준 값을 찾는다.

위의 예시에서 3개의 자식이 있는 상태에서 2번째 b요소를 찾고싶을 때,

3번째 예시에서는 3개의 자식 중에서 2번째의 위치가 a가 되므로, 아무것도 찾지 못하게 된다.

nth-of-type

nth-of-type은 지정된 자식 태그 요소에서의 순서를 찾는다.

첫번째 예시에서 nth-child 였을 경우 2번째 자식 요소에 a 태그가 없으므로 아무것도 찾지 못한다.

하지만 nth-of-type은 2번째에 있는 a 태그를 찾기 때문에 3번째 자식인 a를 찾을 수 있게 된다.