CSS 강좌 | 선택자 > 가상 클래스(Pseudo-classes) > :empty

:empty는 내용이 없는 비어있는 요소를 선택합니다.

문법

selector:empty { ... }

예를 들어

li:empty

li 요소 중 내용이 없는 것을 선택합니다. 즉

<li></li>

가 선택됩니다.

공백도 내용이 있는 것으로 봅니다. 따라서

<li> </li>

처럼 빈 칸이 있는 것은 선택되지 않습니다.

예제

비어있는 li 요소에 테두리를 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS Tutorial</title>
    <style>
      body {
        font-size: 50px;
      }
      li:empty {
        border: 1px solid #444444;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Lorem</li>
      <li></li>
      <li>Ipsum</li>
    </ul>
  </body>
</html>

브라우저 지원

  • Chrome : 4.0
  • Firefox : 3.5
  • Internet Explorer : 9.0
  • Opera : 9.6
  • Safari : 3.2
Category

Created on 2016-09-07 12:39 | Updated on 2017-02-26 12:40

이 글을 공유하기

Kakao

Book navigation