CSS :empty 가상 클래스 선택자 – 내용이 빈 요소를 선택

정의 및 사용 방법

:empty 가상 클래스 선택자는 '내용이 빈 요소'를 선택합니다.

요소 내부에 공백, 텍스트, 자식 요소가 없어야 하지만, HTML 주석은 포함되어 있어도 내용이 빈 요소로 간주합니다.

구문

기본 예제

다음은 p:empty로 선택되는 유효한 '내용이 빈 <p> 요소'입니다.

다음은 p:empty로 선택되지 않는 '내용이 빈 <p> 요소'가 아닙니다.

HTML

<!-- 모든 띄어쓰기는 공백임 -->
<p> </p>
<p>     </p>

<!-- 공백을 나타내는 특수 문자도 공백임 -->
<p>&nbsp;</p> <!-- &nbsp;는 줄바꿈되지 않는 공백을 나타내는 특수 문자-->

<!-- 소스 코드 서식에서 줄바꿈도 공백임 -->
<p>
</p>

<!-- 텍스트나 자식 요소가 없어야 함 -->
<p>텍스트</p>
<p><span></span></p>

명세서의 변경 사항

Selectors Level 2와 Level 3에서는 공백만 포함한 요소가 :empty 가상 클래스 선택자에 선택되지 않았습니다. 하지만 HTML에서는 소스 코드의 들여쓰기나 줄바꿈에 공백을 사용하는 경우가 많고, 이러한 공백은 요소의 텍스트 콘텐츠에 포함될 수 있습니다. 특히 종료 태그를 생략할 수 있는 요소에서는 뒤따르는 공백이 해당 요소의 콘텐츠에 포함될 수 있습니다.

이러한 이유로 Selectors Level 4(Editor’s Draft, 18 September 2026)에서는 공백만 포함한 요소도 :empty에 선택되도록 정의가 변경되었습니다. 다만 현재 브라우저에서는 이 변경 사항이 (아직) 지원되지 않으므로, 공백만 포함한 요소는 여전히 :empty에 선택되지 않습니다.

CSS로 생성된 콘텐츠와 `:empty`

요소에 CSS의 ::before 또는 ::after로 생성된(generated) 콘텐츠가 있더라도, :empty의 선택 조건에는 아무런 영향을 주지 않습니다.

다음의 예제로 확인해 보세요.

CSS

p {
    background-color: yellow;
}

p::before { /* CSS로 생성된 콘텐츠 */
    content: "Hello";
}

p:empty {
    border: 3px solid red; /* 요소에 3px 두께의 빨간색 테두리 지정 */
}

CSS

p {
    background-color: yellow;
}

p::before { /* CSS로 생성된 콘텐츠 */
    content: "Hello";
}

p:empty {
    border: 3px solid red; /* 요소에 3px 두께의 빨간색 테두리 지정 */
}