CSS를 작성하다 보면 특정 요소만 골라서 스타일을 적용하고 싶은 순간이 찾아옵니다. 예를 들어 <div> 태그와 <span> 태그가 가득한 HTML 문서에서 각 유형별로 첫 번째 요소만 선택해 별도의 스타일을 지정하고 싶다고 가정해 봅시다. 이럴 때 사용하는 것이 바로 :first-of-type 가상 클래스입니다.
가상 클래스(Pseudo-class)란?
가상 클래스는 CSS 선택자가 원래 스타일과는 다른 특정 스타일을 갖도록 만드는 방법으로, 요소가 처한 상태(state)에 따라 동작합니다. 여기서는 첫 번째 <div>와 첫 번째 <span>만 선택해 스타일을 지정하며, 나머지 div나 span은 전혀 선택되지 않습니다.
:first-of-type 기본 예제
<html>
<head>
<style>
body {
display: flex;
flex-flow: row wrap;
}
div {
height: 100px;
width: 200px;
border: 1px solid black;
margin: 20px;
padding: 20px;
}
/* 같은 유형 중 첫 번째 요소 선택 */
div:first-of-type {
background: purple;
color: white;
}
div span:first-of-type {
color: red;
text-decoration: underline;
background: lightblue;
}
</style>
</head>
<body>
<div>나는 첫 번째 div<span> div 안에 있으며 첫 번째 span</span><span> 나는 두 번째 span</span></div>
<div>나는 두 번째 div<span> div 안에 있는 span</span><span> 나는 두 번째 span</span></div>
<div>나는 세 번째 div<span> div 안에 있는 span</span><span> 나는 두 번째 span</span></div>
<div>나는 네 번째 div<span> div 안에 있는 span</span><span> 나는 두 번째 span</span></div>
<div>나는 다섯 번째 div<span> div 안에 있는 span</span><span> 나는 두 번째 span</span></div>
<div>나는 여섯 번째 div<span> div 안에 있는 span</span><span> 나는 두 번째 span</span></div>
<div>나는 일곱 번째 div<span> div 안에 있는 span</span><span> 나는 두 번째 span</span></div>
</body>
</html>
위 예제에는 여러 개의 div와 그 안에 포함된 span들이 있습니다. CSS 선택자 div:first-of-type는 자신과 같은 유형의 요소 중 맨 처음 등장하는 것만 선택해 스타일을 적용합니다. 반면 div span:first-of-type는 div가 부모 요소이기 때문에 각 div 안에서 첫 번째로 등장하는 span을 선택한다는 점이 다릅니다.
참고로 div:first-of-type는 div:nth-child(1)와 비슷하게 표현할 수 있습니다. 다만 두 선택자는 미묘하게 다른데, :nth-child(1)는 '첫 번째 자식이면서 동시에 div인 경우'에만 매칭되는 반면, :first-of-type는 형제 요소 중 첫 번째 div라면 몇 번째 자식이든 매칭됩니다. 모든 형제가 div일 때는 결과가 같지만, 다른 종류의 요소가 섞여 있다면 차이가 발생하므로 주의해서 사용하세요.
마무리
이번 글에서는 :first-of-type 가상 클래스에 대해 살펴보았습니다. 가상 클래스는 스타일을 적용할 때 CSS 선택자가 어떤 상태여야 하는지를 기술하는 도구라고 할 수 있으며, 기본 문법도 함께 확인했습니다. :last-of-type, :nth-of-type() 같은 다른 가상 선택자들도 함께 익혀두면 실무에서 훨씬 유연하게 스타일링할 수 있습니다!