CSS에서 자신이 어느 순서에 속하는지 선택하는 가상 클래스가 존재한다.

그것이 바로 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 란?

예시

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를 content로 가지는 요소는 2번째 자식 요소이기떄문에 nth-child(2)로 접근을 해야한다.

결론