:first-child 가상 클래스는 어떤 요소가 부모 요소의 첫 번째 자식일 때 해당 요소에만 특별한 스타일을 적용할 수 있게 해주는 CSS 선택자입니다. 목록의 첫 번째 항목 강조나 문단 첫 줄 들여쓰기 등을 처리할 때 유용하게 활용됩니다.
예제
다음 코드를 실행하면 :first-child 가상 클래스의 동작 방식을 직접 확인할 수 있습니다.
<html>
<head>
<style>
div > p:first-child
{
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>First paragraph in div. This paragraph will be indented</p>
<p>Second paragraph in div. This paragraph will not be indented</p>
</div>
<p>But it will not match the paragraph in this HTML:</p>
<div>
<h3>Heading</h3>
<p>The first paragraph inside the div. This paragraph will not be effected.</p>
</div>
</body>
</html>
동작 원리 이해하기
위 예제에서 첫 번째 <div> 안의 첫 번째 <p> 태그에는 25px의 텍스트 들여쓰기가 적용되지만, 두 번째 <p> 태그에는 스타일이 적용되지 않습니다.
반면 세 번째 <div>에서는 <h3> 태그가 첫 번째 자식 요소이므로, 그 뒤에 오는 <p> 태그는 :first-child 조건에 해당하지 않아 스타일이 적용되지 않습니다.
즉, :first-child는 단순히 "부모 안의 첫 번째 p 태그"를 의미하는 것이 아니라, "부모의 첫 번째 자식이면서 동시에 지정된 선택자와 일치하는 요소"를 의미한다는 점에 주의해야 합니다. 이 차이를 정확히 이해하고 있어야 의도하지 않은 스타일 누락을 피할 수 있습니다.