CSS의 :first-child 선택자는 부모 요소의 첫 번째 자식으로 존재하는 모든 <p> 요소에 스타일을 적용할 때 사용합니다. 이 선택자를 활용하면 별도의 클래스나 ID를 추가하지 않고도 특정 위치에 있는 요소만 간편하게 선택할 수 있습니다.
:first-child 선택자란?
:first-child는 구조적 의사 클래스(structural pseudo-class) 중 하나로, 해당 요소가 부모 요소의 첫 번째 자식일 경우에만 스타일이 적용됩니다. 예를 들어 목록의 첫 번째 항목이나 컨테이너 안의 첫 번째 문단에만 다른 배경색을 지정하고 싶을 때 유용하게 활용됩니다.
예제
다음 코드를 실행하면 :first-child 선택자가 실제로 어떻게 동작하는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
background-color: orange;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>This is demo text.</p>
<div>
<p>This is demo text, with the first child of its parent div.</p>
<p>This is demo text, but not the first child.</p>
</div>
</body>
</html>
실행 결과 살펴보기
위 예제에서 p:first-child 규칙이 적용되는 요소는 다음과 같습니다.
- <div>의 첫 번째 자식인 <p> 요소 — "This is demo text, with the first child of its parent div." 문단에 주황색 배경이 적용됩니다.
반면 아래 요소들은 스타일이 적용되지 않습니다.
- <h1> 바로 뒤의 <p> 요소 — 이 문단 앞에 <h1>이 있기 때문에 <body>의 첫 번째 자식이 아니므로 선택되지 않습니다.
- <div> 안의 두 번째 <p> 요소 — 첫 번째 자식이 아니므로 선택되지 않습니다.
즉, :first-child는 단순히 "문서에서 처음 등장하는 요소"가 아니라 부모 기준으로 첫 번째 자식인지를 판단한다는 점이 핵심입니다.
함께 알아두면 좋은 관련 선택자
:last-child— 부모의 마지막 자식 요소를 선택합니다.:nth-child(n)— 부모의 n번째 자식 요소를 선택하며,:nth-child(odd),:nth-child(even)처럼 활용할 수 있습니다.:only-child— 부모의 유일한 자식인 요소를 선택합니다.
이러한 구조적 선택자들을 조합하면 HTML을 수정하지 않고도 다양한 레이아웃과 스타일 효과를 구현할 수 있습니다.