CSS 가상 클래스 셀렉터 :nth-child와 :nth-of-type의 차이점

종종 헷갈리는 CSS 가상 선택자 :nth-child와 :nth-of-type의 차이점에 대해서 알아보겠습니다. 예를 들어 다음과 같은 HTML 코드가 있습니다. 

 

<div>
  <p>Lorem</p>
  <p>ipsum</p> 
  <p>dolor</p>
</div>

 

nth-child와 nth-of-type을 이용해서 ipsum라는 텍스트의 색상을 흰색, 배경을 노란색으로 변경해보겠습니다.

 

:nth-child 

nth-child는 부모 요소의 n번째 자식 요소를 의미합니다. 이번 예제에서는 p:nth-child(2)라고 입력했으니 p 태그의 부모 요소를 기준으로 두 번째 자식 요소에 해당하는 <p>ipsum</p>를 지칭합니다.

 

See the Pen nth-child by hogni-seoul (@hogni-seoul) on CodePen.

 

:nth-of-type 

nth-of-type은 부모 요소의 자식 요소 중 type 조건을 만족하는 n번째 자식 요소를 의미합니다. p:nth-of-type(2)라고 입력했으니 부모 요소의 두 번째 <p></p> 자식 요소를 선택합니다.

 

See the Pen nth-of-type by hogni-seoul (@hogni-seoul) on CodePen.

 

두 셀렉터의 차이점

두 선택자의 차이점은 type 조건의 만족 여부입니다. nth-child의 경우 부모 요소의 모든 자식 중 순서만 맞다면 해당 요소를 선택합니다. 반면 nth-of-type의 경우 부모 요소의 모든 자식 요소 중 ①type 조건을 만족하고 ②순서를 만족하는 대상을 선택합니다.

 

아래 HTML 코드를 이용해서 두 방법을 비교해보면 그 차이가 명확합니다. <h1></h1> 태그를 추가했습니다.

 

<div>
  <h1>Heading1</h1>
  <p>Lorem</p>
  <p>ipsum</p> 
  <p>dolor</p>
</div>

 

 

p:nth-child(2)

부모 요소를 기준으로 두 번째 자식 요소를 선택하기 때문에 Lorem의 색깔이 변경되었습니다.

 

See the Pen p:nth-child(2) by hogni-seoul (@hogni-seoul) on CodePen.

 

p:nth-of-type(2)

부모 요소를 기준으로 자식 요소인 <p></p> 중에서 두 번째에 해당하는 요소를 선택하기 때문에 결과가 변하지 않았습니다.

 

See the Pen p:nth-of-type(2) by hogni-seoul (@hogni-seoul) on CodePen.