CSS에서 :only-child 선택자를 사용하면 부모 요소의 유일한 자식으로 존재하는 모든 <p> 요소에 스타일을 적용할 수 있습니다.
:only-child 선택자는 형제 요소가 하나도 없이 단독으로 존재하는 요소만 선택합니다. 따라서 여러 개의 <p> 태그가 함께 있는 경우에는 스타일이 적용되지 않고, 오직 하나뿐인 <p> 태그에만 배경색 등의 스타일이 지정됩니다.
예제 코드
아래 코드를 실행하면 :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> 요소가 하나만 존재하므로 주황색(orange) 배경이 적용됩니다. 반면 두 번째 <div> 안에는 세 개의 <p> 요소가 있어 형제 요소가 존재하므로 어떤 스타일도 적용되지 않습니다.
:only-child 선택자의 동작 원리
:only-child 선택자는 다음과 같은 조건에서 유용하게 사용할 수 있습니다.
- 목록이나 컨테이너에 항목이 하나만 있을 때 특별한 스타일을 적용하고 싶은 경우
- JavaScript 없이 순수 CSS만으로 특정 구조의 요소를 선택해야 하는 경우
참고로, :first-child와 :last-child를 함께 사용하는 것과 결과가 같지만, :only-child 선택자를 사용하면 코드가 더 간결해집니다.