CSS :first-of-type 선택자로 부모의 첫 번째 요소에 스타일 지정하기

CSS에서 특정 요소가 부모 요소 내의 첫 번째 해당 타입일 때 스타일을 적용하려면 :first-of-type 선택자를 사용하면 됩니다. 이 선택자는 형제 요소 중 자신과 같은 타입(태그)의 첫 번째 요소를 대상으로 하기 때문에, 문서 구조에 따라 유연하게 첫 번째 요소만 선택할 수 있습니다.

:first-of-type 선택자란?

:first-of-type은 구조적 의사 클래스(pseudo-class) 중 하나로, 같은 부모를 가진 형제 요소들 중에서 지정한 타입의 첫 번째 요소에만 스타일을 적용합니다. 예를 들어 여러 개의 태그 중 첫 번째 태그만 배경색을 다르게 설정하고 싶을 때 유용합니다.

예제 코드

아래 코드를 실행하면 두 개의 단락 중 첫 번째 요소에만 주황색 배경이 적용되는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         p:first-of-type {
            background: orange;
         }
      </style>
   </head>
   <body>
      <p>This is demo text1.</p>
      <p>This is demo text2.</p>
   </body>
</html>

실행 결과

위 코드를 브라우저에서 열면 "This is demo text1."이라는 첫 번째 단락에만 주황색 배경이 표시됩니다. 두 번째 단락에는 아무런 스타일도 적용되지 않습니다.

참고: 관련 선택자

:first-of-type 외에도 비슷한 용도로 사용할 수 있는 선택자들이 있습니다.

:last-of-type — 같은 타입의 마지막 형제 요소를 선택합니다.
:nth-of-type(n) — 같은 타입 중 n번째 요소를 선택합니다.
:first-child — 부모의 첫 번째 자식 요소를 선택합니다. 단, 타입과 무관하므로 첫 번째 자식이 가 아니면 적용되지 않습니다.

따라서 부모의 첫 번째 자식이 반드시 요소라는 보장이 없다면, :first-child보다 :first-of-type을 사용하는 것이 더 안전하고 정확한 방법입니다.