CSS :first-child 선택자란?
부모 요소의 첫 번째 자식인 모든 <p> 요소에 스타일을 적용하려면 CSS의 :first-child 가상 클래스 선택자를 사용하면 됩니다. 이 선택자는 해당 요소가 부모 요소의 첫 번째 자식일 경우에만 스타일을 적용하므로, 목록이나 본문에서 첫 번째 항목만 다르게 강조하고 싶을 때 매우 유용합니다.
기본 문법
p:first-child {
/* 여기에 원하는 스타일 속성 작성 */
}예제
다음 코드를 실행하면 :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>
결과 및 동작 방식
위 예제를 브라우저에서 실행하면 다음과 같은 결과를 확인할 수 있습니다.
- <div> 안의 첫 번째 <p> — 부모 요소(<div>)의 첫 번째 자식이므로 주황색 배경이 적용됩니다.
- <div> 안의 두 번째 <p> — 첫 번째 자식이 아니므로 배경색이 적용되지 않습니다.
주의할 점은 p:first-child는 "<p> 태그 중 첫 번째 것"이 아니라 "부모의 첫 번째 자식이면서 <p>인 요소"를 의미한다는 것입니다. 만약 부모의 첫 번째 자식이 <h1>처럼 다른 요소라면, 그 뒤에 오는 <p>에는 스타일이 적용되지 않습니다. 이런 경우에는 :nth-child()나 :first-of-type 선택자를 활용하면 더 유연하게 원하는 요소를 선택할 수 있습니다.