CSS의 :first-of-type 선택자는 부모 요소 안에서 같은 유형(태그) 중 첫 번째로 등장하는 요소를 선택하는 의사 클래스입니다. 이를 활용하면 부모 요소 내부의 여러 <p> 태그 중 첫 번째 <p> 요소에만 간편하게 스타일을 적용할 수 있습니다.
:first-of-type 선택자란?
:first-of-type은 형제 관계에 있는 요소들 중 자신과 동일한 태그 유형을 가진 첫 번째 요소를 대상으로 합니다. 예를 들어, 본문에 여러 개의 문단이 있을 때 첫 번째 문단만 강조 처리하고 싶다면 이 선택자가 매우 유용합니다.
예제 코드
아래 코드는 :first-of-type 선택자를 사용해 첫 번째 <p> 요소에 주황색 배경을 적용하는 예시입니다. 직접 실행해서 결과를 확인해 보세요.
<!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, n번째 요소를 선택하는 :nth-of-type() 등이 있습니다. 이들을 조합하면 문서 구조에 따라 훨씬 더 유연하고 다양한 스타일링이 가능합니다.