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

TL;DR#

• nth-of-type은 부모 안에서 같은 종류의 요소만 세어 순서를 따집니다.
• nth-child는 부모 안의 모든 자식 요소를 세어 순서를 따집니다.
• 같은 위치를 가리키더라도 자식에 섞인 요소 종류에 따라 n 값이 달라지므로, 마크업 구조를 보고 골라 써야 합니다.

두 가상 클래스를 정리하게 된 이유#

CSS에는 요소가 자신이 몇 번째 순서에 속하는지를 기준으로 선택하는 가상 클래스(pseudo-class)가 있습니다. 바로 nth-of-type과 nth-child입니다.

지금까지 이런 상황을 마주할 때마다 주로 nth-child를 사용해 왔는데, nth-of-type이라는 것도 있다는 사실을 알게 되어 두 가상 클래스의 차이를 정리해 보려 합니다.

nth-of-type이란?#

부모 엘리먼트 내에서 같은 종류의 엘리먼트 중 자신이 몇 번째인지를 판단해 적용합니다.

예시#

복사
p:nth-of-type(1) {
  font-weight: bold;
}

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p> // 이곳을 선택하게 된다.
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

위 예시처럼 div 안에 여러 요소가 섞여 있지만, nth-of-type(1)이므로 p 요소 중에서 가장 첫 번째인 것이 선택됩니다.

nth-child란?#

부모 엘리먼트 내에 존재하는 모든 자식 요소 중에서 n번째 요소를 선택합니다.

예시#

복사
p:nth-child(2) {
  font-weight: bold;
}

<div>
  <div>This element isn't counted.</div>
  <p>1st paragraph.</p> // 이곳을 선택하게 된다.
  <p class="fancy">2nd paragraph.</p>
  <div>This element isn't counted.</div>
  <p class="fancy">3rd paragraph.</p>
  <p>4th paragraph.</p>
</div>

앞서 본 nth-of-type과 달리, 1st paragraph를 콘텐츠로 가지는 요소는 전체 자식 중 두 번째 자식 요소이기 때문에 nth-child(2)로 접근해야 합니다.

결론#

두 가상 클래스 모두 자식 요소에서 순서를 기준으로 선택해 스타일을 적용한다는 점은 같습니다. 다만 자식 요소에 어떤 종류의 요소들이 섞여 있느냐에 따라 n 값이 달라집니다. 따라서 자신이 마크업한 구조를 보고 상황에 맞게 적절히 사용하면 됩니다.