CSS :nth-of-type(n) 선택자로 부모의 n번째 요소에 스타일 적용하기

CSS의 :nth-of-type(n) 선택자를 사용하면 부모 요소 안에서 n번째로 나오는 모든 요소에 스타일을 지정할 수 있습니다. 이 선택자는 같은 타입(태그 이름)을 가진 형제 요소들 사이에서 순서를 기준으로 대상 요소를 찾아냅니다.

:nth-of-type(n) 선택자란?

:nth-of-type(n)은 동일한 유형의 형제 요소 중 n번째 위치한 요소를 선택하는 구조적 의사 클래스(pseudo-class)입니다. 예를 들어 p:nth-of-type(2)라고 작성하면, 부모 요소 내부에서 두 번째로 등장하는 요소만 선택하게 됩니다. 이는 단순히 전체 자식 요소의 순서를 세는 :nth-child()와 달리, 같은 태그 유형끼리만 순서를 계산한다는 점이 특징입니다.

예제

다음 코드를 실행하면 네 개의 문단 중 두 번째 요소에만 노란색 배경이 적용되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
        p:nth-of-type(2) {
          background: yellow;
        }
      </style>
   </head>
   <body>
      <p>데모 텍스트 1입니다.</p>
      <p>데모 텍스트 2입니다.</p>
      <p>데모 텍스트 3입니다.</p>
      <p>데모 텍스트 4입니다.</p>
   </body>
</html>

실행 결과

위 예제에서는 "데모 텍스트 2입니다."라는 문단만 노란색 배경으로 표시됩니다. 그 이유는 해당 요소가 부모인 <body> 태그 안에서 두 번째 요소에 해당하기 때문입니다. 만약 문단 사이에 다른 태그(예: <div>, )가 삽입되더라도, :nth-of-type()은 요소끼리의 순서만 따지므로 결과가 달라지지 않습니다.