CSS의 :nth-of-type(n) 선택자는 부모 요소 안에서 n번째로 나타나는 특정 유형의 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 예를 들어, 부모 요소 내에서 두 번째 <p> 요소만 골라 배경색을 지정하거나 강조 표시를 하고 싶을 때 이 선택자를 활용할 수 있습니다.
:nth-of-type(n) 선택자 예제
아래 코드에서는 p:nth-of-type(2)를 사용하여 부모 요소인 <body> 안에서 두 번째 <p> 요소에 노란색 배경을 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-of-type(2) {
background: yellow;
}
</style>
</head>
<body>
<p>첫 번째 데모 텍스트입니다.</p>
<p>두 번째 데모 텍스트입니다.</p>
<p>세 번째 데모 텍스트입니다.</p>
<p>네 번째 데모 텍스트입니다.</p>
</body>
</html>실행 결과
위 코드를 실행하면 네 개의 문단 중 두 번째 <p> 요소만 노란색 배경으로 표시됩니다. 나머지 문단에는 스타일이 적용되지 않습니다.
:nth-of-type(n) 선택자의 특징
:nth-of-type(n)은 같은 태그 이름을 가진 형제 요소들 사이에서 순서를 계산한다는 점이 핵심입니다. 이 때문에 다른 종류의 요소가 중간에 끼어 있어도 해당 타입 기준으로 n번째 요소를 정확히 찾아냅니다.
- n 자리에 숫자를 넣으면 해당 순번의 요소가 선택됩니다. (예:
:nth-of-type(2)) - 수식도 사용할 수 있습니다. (예:
:nth-of-type(2n)은 짝수 번째,:nth-of-type(2n+1)은 홀수 번째 요소 선택) - 키워드인
odd(홀수),even(짝수)도 활용 가능합니다.
참고로 :nth-child(n)와 비슷해 보이지만, :nth-child(n)는 모든 형제 요소를 대상으로 순서를 세는 반면, :nth-of-type(n)는 지정한 태그 유형만 대상으로 순서를 센다는 차이가 있습니다. 특정 태그만 정밀하게 스타일링하고 싶다면 :nth-of-type(n)이 더 적합합니다.