CSS의 :empty 선택자를 사용하면 자식 요소나 텍스트 노드가 하나도 없는 빈 <p> 요소에 별도의 스타일을 적용할 수 있습니다. 예를 들어, 콘텐츠가 비어 있는 문단을 시각적으로 구분해야 할 때 이 선택자가 매우 유용합니다.
:empty 선택자란?
:empty 선택자는 텍스트를 포함한 어떤 자식 노드도 가지지 않은 요소를 대상으로 합니다. 주의할 점은 공백 문자(스페이스)조차 내용으로 간주되기 때문에, <p> </p>처럼 공백이 포함된 요소는 빈 요소로 인식되지 않습니다.
예제 코드
아래 코드를 실행하면 일반 문단에는 회색 배경이 적용되고, 자식 요소가 없는 빈 문단에는 주황색 배경이 적용되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
p.demo {
width: 300px;
height: 20px;
background: gray;
}
p:empty {
width: 150px;
height: 20px;
background: orange;
}
</style>
</head>
<body>
<p class = "demo">This is demo text. Below is empty text.</p>
<p></p>
</body>
</html>
코드 설명
p.demo 클래스에는 너비 300px와 회색 배경이 지정되어 있고, p:empty 규칙은 너비 150px와 주황색 배경을 적용합니다. 실행 결과, 텍스트가 있는 첫 번째 문단은 회색으로 표시되며, 그 아래의 완전히 비어 있는 두 번째 문단만 주황색으로 나타납니다. 이처럼 :empty 선택자를 활용하면 동적으로 생성되는 콘텐츠에서 빈 영역을 손쉽게 처리하고 사용자 경험을 개선할 수 있습니다.