가상 클래스 empty

가상 클래스 empty는 빈 요소(텍스트를 포함하지 않는)가 어떻게 보일지 지정합니다.

구문

css선택자:empty {
  
}

예시

이 예시에서 마지막 li는 비어 있지만, 여전히 마커를 가질 것입니다:

html<ul>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li></li>
</ul>

Результат:

예시

빈 li 태그에 대한 동작을 변경해 보겠습니다:

html<ul>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li></li>
</ul>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

예시

빈 li를 완전히 숨깁니다:

html<ul>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li>목록 항목</li>
  <li></li>
</ul>

cssli:empty {
  display: none;
}

Результат:

같이 보기