[CSS] :nth-of-type과 :nth-child 차이점

 

가상 클래스 선택자(pseudo-class selector) :nth-of-type과 :nth-child 비교

:nth-of-type

선택자로 지정된 요소와 일치하는 형제 요소 중 n번째인 요소를 선택한다.

See the Pen css - nth-of-type by seungwonleee (@seungwon-code) on CodePen.

div 부모 태그 안에 1번째 p 태그 자식 요소와 2번째 p 태그 자식 요소를 선택한다. h1과 h2 태그는 p 태그가 아니므로 순서에 영향을 받지 않는다.

:nth-child

형제 요소 중 n번째인 요소를 선택한다. 만약 해당 순서의 요소와 선택자로 지정된 요소가 일치하지 않는 경우 선택되지 않는다.

See the Pen Untitled by seungwonleee (@seungwon-code) on CodePen.

div 부모 태그 안에  1번째 p 태그와 2번째 p 태그를 선택하지만 1번째 요소가 h1 태그이므로 선택되지않아 css가 적용되지 않으며 2번째 요소는 p 태그이므로 css가 적용된다.