About Css Pseudo Class The Empty

CSS에서 :empty는 특정 요소가 비어있는 경우 선택할 수 있는 가상 클래스입니다. 즉, 자식 요소가 없는 요소를 선택할 때 사용합니다. 예를 들어, 아래와 같이 HTML 코드가 있다면:

<div class="box">
  <p>Hello, world!</p>
</div>
<div class="box"></div>

CSS에서 .box 클래스를 가진 요소 중 빈 요소만 선택하려면 다음과 같이 작성할 수 있습니다.

.box:empty {
  border: 1px solid red;
}

위 코드는 두 번째 <div> 요소에 빨간 테두리를 추가합니다. 왜냐하면 이 요소가 비어있기 때문입니다.