CSS의 :only-child 선택자는 부모 요소 안에서 유일한 자식으로 존재하는 모든 <p> 요소에 스타일을 적용할 때 사용합니다. 형제 요소가 하나라도 있다면 해당 요소는 선택되지 않습니다.
:only-child 선택자란?
:only-child는 CSS 구조적 의사 클래스(pseudo-class) 중 하나입니다. 어떤 요소가 부모 내에서 단독 자식일 때만 매칭되며, :first-child와 :last-child가 동시에 참인 경우와 같은 의미로 이해할 수 있습니다.
- 형제 요소가 전혀 없는 요소 → 선택됨
- 형제 요소가 하나 이상 있는 요소 → 선택되지 않음
예제 코드
다음 코드를 실행하면 :only-child 선택자의 동작 방식을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:only-child {
background: orange;
}
</style>
</head>
<body>
<h1>Heading</h1>
<div>
<p>This is a paragraph.</p>
</div>
<div>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</body>
</html>
실행 결과 설명
위 예제에서 첫 번째 <div> 안에는 <p> 요소가 하나뿐이므로, 해당 문단은 p:only-child 규칙에 매칭되어 주황색(orange) 배경이 적용됩니다.
반면 두 번째 <div>에는 <p> 요소가 세 개 존재합니다. 각 문단은 서로 형제 관계이므로 '유일한 자식' 조건을 만족하지 못해 배경 스타일이 적용되지 않습니다.
활용 팁
:only-child는 목록이나 카드 레이아웃에서 항목이 하나뿐일 때 별도의 스타일을 주고 싶은 경우에 특히 유용합니다. JavaScript 없이 순수 CSS만으로 조건 분기 처리가 가능하다는 점이 큰 장점입니다.