[CSS] :nth-child()와 :nth-of-type()

CSS에는 가상 클래스 선택자(Pseudo Class)가 있습니다.

선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상선택자라고 합니다.

 

이번 게시글에서는 :nth-child()와 :nth-of-type()에 대해 알아보겠습니다.

 

🤔 :nth-child()

:nth-child() 선택자를 사용하면 자식 요소의 위치에 따라 선택할 수 있습니다.

예를 들어 선택자:nth-child(3) 인 경우, 선택자의 형제 중 3번째 요소를 선택합니다.

🤔 :nth-of-type()

:nth-of-type() 선택자를 사용하면 특정 태그 위치에 따라 선택할 수 있습니다.

예를 들어 선택자:nth-of-type(3) 인 경우, 선택자의 같은 선택자 형제(태그) 중 3번째 요소를 선택합니다.

 

 

아래 예시를 보면 더욱 잘 이해될 수 있습니다.

<dl>
    <dt>제목</dt>  <!-- dt:nth-child(1), dt:nth-of-type(1) -->
    <dd>내용</dd>  <!-- dd:nth-child(2), dd:nth-of-type(1) -->
    <dd>내용</dd>  <!-- dd:nth-child(3), dd:nth-of-type(2) -->
    <dd>내용</dd>  <!-- dd:nth-child(4), dd:nth-of-type(3) -->
    <dt>제목</dt>  <!-- dt:nth-child(5), dt:nth-of-type(2) -->
    <dd>내용</dd>  <!-- dd:nth-child(6), dd:nth-of-type(4) -->
</dl>

 

주석에 적힌 두 개의 선택자는 동일한 요소를 선택하고 있습니다.

 

 

✔ 정리 

:nth-child()는 부모를 기준으로 전체에서 몇번째 자식인지를 나타내고,

:nth-of-type()은 부모를 기준으로, 자신과 같은 태그 중 몇번째 자식인지를 나타냅니다.