[CSS] :empty

CSS의 :empty 의사 클래스는 자식이 없는 요소를 선택합니다. 여기서 자식이란, 모든 요소들과 텍스트(공백 포함)을 말합니다. 주석은 자식으로 취급되지 않습니다.

예시)

html

<div class="box"><!-- 라임색으로 변합니다. --></div>
<div class="box">핑크색으로 변합니다.</div>

css

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

라고 했을 때 첫 번째 박스는 라임색으로, 두 번째 박스는 핑크색으로 보일 것입니다.

:empty 의사클래스와 접근성

스크린 리더들은 비어있는 콘텐츠를 분석할 수 없습니다. 앵커 태그나 버튼과 같이 상호작용이 가능한 모든 콘텐츠에는 반드시 스크린 리더들이 읽을 수 있는 이름이나 값을 넣어주어야 합니다. :empty 를 테이블 안의 빈 셀 값이나 특정 정보를 표현할 때 사용하기도 하는데 스크린 리더기 사용자들 역시 동일한 정보를 받을 수 있어야 하기 때문에 단순한 디자인 표현이 아니라면, 부가정보를 넣는 등의 일이 꼭 필요합니다.

참고사항

:empty 의사 클래스는 셀렉터 레벨 4가 되면서 :moz-only-whitespace와 같은 방식으로 동작합니다. 그러나 아직 지원되는 브라우저가 없습니다.