가상 클래스 empty

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

구문

선택자:empty {
	
}

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

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

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

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

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

빈 li를 완전히 숨깁니다:

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

li:empty {
	display: none;
}