<div>
    <p>유일한 p 요소입니다.</p>
    <span>이건 span입니다.</span>
</div>

<div>
    <p>첫 번째 p 요소입니다.</p>
    <p>두 번째 p 요소입니다.</p>
</div>
p:only-of-type {
    background-color: yellowgreen;
}
실제 적용된 모습
:only-of-type {
    /* ... */
}
<div>
    <p>문단 요소입니다.</p>
</div>
<div>
    <p>문단 요소입니다.</p>
    <p>문단 요소입니다.</p>
</div>
p:only-of-type {
    background-color: yellowgreen;
}
실제 적용된 모습
<style>
    .red-item:only-of-type {
        color: red;
        font-weight: bold;
    }
</style>
<div>
    <p>문단 요소입니다.</p>
    <p class="red-item">매칭될 요소로 기대하지만 아님</p>
    <p>문단 요소입니다.</p>
</div>
<!--
    * 혹시 .red-item 유형 중에서  유일한(only, 단독) 요소를 선택했나요?
    * 그렇다면 잘못된 선택입니다.
    *
    * only-of-type은 태그 유형의 형제 요소들 중에서 유일한 요소를 선택합니다.
    *
    * .red-item:only-of-type는 두 부분으로 나뉩니다.
    * => .red-item: 클래스 속성의 값이 'red-item'인 요소의 태그 이름은 <p>입니다.
    * => 특정 유형은 태그 이름 유형을 의미합니다.
    * => <p> 요소가 특정 유형이 됩니다.
    * => 태그 유형이 <p>의 유일한 요소가 'red-item'라는 클래스 속성의 값이 있어야 선택됩니다.
    * => 따라서, 위 요소 중에서는 매칭되는 요소가 없습니다.
-->
실제 적용된 모습 .red-item:only-of-type 선택자로 매칭되는 요소가 없습니다.