CSS :empty 선택자로 자식 요소가 없는 태그 스타일링하기

CSS에서 텍스트나 자식 요소가 전혀 없는 모든 태그에 스타일을 적용하려면 :empty 선택자를 사용하면 됩니다. :empty 선택자는 내부에 아무런 콘텐츠도 포함하지 않은 요소만 정확히 찾아내기 때문에, 일반 문단과는 다른 스타일을 손쉽게 지정할 수 있습니다.

:empty 선택자 사용 예제

아래 코드에서는 일반 문단에는 회색 배경을, 비어 있는 태그에는 주황색 배경과 더 작은 크기를 적용했습니다. 코드를 직접 실행해 결과를 확인해 보세요.

<!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 규칙은 클래스가 demo인 문단에 너비 300px, 높이 20px, 회색 배경을 적용합니다. 반면 p:empty 규칙은 자식 노드가 하나도 없는 요소에만 너비 150px, 높이 20px, 주황색 배경을 지정합니다. 따라서 화면에는 텍스트가 있는 회색 문단과 그 아래에 주황색으로 표시되는 빈 문단이 함께 나타납니다.

한 가지 주의할 점은 :empty 선택자가 공백이나 줄바꿈 문자조차 허용하지 않는다는 것입니다. 처럼 태그 사이에 공백이 있으면 해당 요소는 '비어 있지 않다'고 판단되어 스타일이 적용되지 않습니다. 따라서 반드시 처럼 태그 사이에 아무 내용도 없는 형태로 작성해야 합니다.