CSS의 :only-of-type 선택자를 사용하면, 부모 요소 내부에서 자신과 같은 유형(태그)이 하나뿐인 <p> 요소에만 스타일을 적용할 수 있습니다. 즉, 같은 부모 아래에 다른 <p> 형제 요소가 존재하지 않는 경우에만 해당 선택자가 매칭됩니다.
예제
: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>
동작 원리
p:only-of-type은 두 가지 조건을 동시에 만족하는 요소를 대상으로 합니다.
① 해당 요소가 <p> 태그여야 하며,
② 같은 부모 요소 안에 <p> 태그가 이것 하나뿐이어야 합니다.
따라서 위 예제에서는 첫 번째 <div>의 "This is demo text 1." 문장만 주황색 배경과 흰색 글자로 표시됩니다. 참고로 비슷한 선택자로 :only-child(유일한 자식 요소)가 있지만, 이는 태그 종류와 관계없이 부모의 단 하나뿐인 자식 전체에 적용된다는 점에서 차이가 있습니다.