정의 및 사용 방법

:only-child 가상 클래스 선택자는
해당하는 요소가 부모의 외동 자식, 즉, 형제가 없이 오직 유일한 자식(only child)인 요소를 선택합니다.

예를 들어, p:only-child는 부모를 가진 외동 자식, 즉 다른 형제가 없는 유일한 자식인 <p> 요소를 선택합니다.

기본 예제

HTML 
<section>
  <p>이 문단은 부모의 외동 자식입니다.</p>
</section>

<section>
  <p>첫 번째 문단</p>
  <span>보조 요소</span>
</section>
CSS 
/* 부모를 가진 외동 자식, 즉 다른 형제가 없는 유일한 자식인 <p> 요소를 선택 */
p:only-child {
    background-color: yellowgreen;
}
실제 적용된 모습

구문

CSS 
:only-child {
    /* ... */
}

예제

HTML 
<ul>
    <li>형제가 없는 외동 li</li>
</ul>
<ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ul>
<ol>
    <li>형제가 없는 외동 li</li>
</ol>
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
<ul>
    <li>
        <ol>
            <li>형제가 없는 외동 li</li>
        </ol>
    </li>
    <li>li</li>
    <li>li</li>
</ul>
CSS 
/* 부모를 가진 외동 자식, 즉 다른 형제가 없는 유일한 자식인 <li> 요소를 선택 */
li:only-child {
    background-color: yellowgreen;
}
실제 적용된 모습

브라우저 호환성

마지막 업데이트 정보: 2025-09-28

:only-child 가상 클래스의 브라우저 호한성
선택자
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
:only-child 2 12 1.5 3.1
부모 요소가 없는 요소와 일치 57 79 52 지원하지 않음

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

:only-child 가상 클래스의 명세서 사양
명세서 사양
:only-child Selectors Level 4
#only-child-pseudo

같이 보기