CSS의 :only-of-type 선택자는 부모 요소 안에서 해당 타입(예: <p>)으로 유일한 자식 요소에만 스타일을 적용할 때 사용합니다. 즉, 형제 요소 중 같은 태그가 하나도 없는 경우에만 선택됩니다.
:only-of-type 선택자란?
:only-of-type은 지정한 타입과 동일한 형제 요소가 존재하지 않는 요소를 선택합니다. 예를 들어 어떤 <div> 안에 <p>가 단 하나뿐이라면 그 <p>에 스타일이 적용되지만, 같은 <div> 안에 <p>가 여러 개 있다면 아무 요소에도 적용되지 않습니다.
비슷한 선택자로 :only-child(유일한 자식)와 :nth-of-type()(타입 기준 순번 선택)가 있으며, 상황에 따라 함께 활용하면 더욱 정교한 스타일링이 가능합니다.
예제
아래 코드를 실행하면 :only-of-type 선택자의 동작을 확인할 수 있습니다. 첫 번째 <div>에는 <p>가 하나뿐이므로 배경색이 주황색으로 변경되고, 두 번째 <div>에는 <p>가 세 개 있어 스타일이 적용되지 않습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p:only-of-type {
background: orange;
color: white;
}
</style>
</head>
<body>
<div>
<p>This is demo text 1.</p>
</div>
<div>
<p>This is demo text 2.</p>
<p>This is demo text 3.</p>
<p>This is demo text 4.</p>
</div>
</body>
</html>